1. Import the global style sheet

  • Import the related styles in main.js
  • import ‘./assets/css/global.css’

2. How do I redirect routes

  • Use the Redirect properties on the Router configuration page
import Vue from 'vue'
import VueRouter from 'vue-router
import Login from '../components/Login.vue' Vue.use(VueRouter) const routes=[ {path:'/',redirect:'/login'}, {path:'/login',component:Login} ] const router=new VueRouter({ routes }) export default routerCopy the code

3. How to import Element-UI on demand

  • Import {Button,Form,Input} from ‘elemental-ui’ in element.js
  • Vue.use(Button)

4. Configuration axios

  • In the main.js file
import axios form 'axios'
axios.defaults.baseURL="http://127.0.0.1:8888/api/private.v1/"
Vue.prototype.$http=axios

Copy the code
  • At this point we can access the $HTTP method through this to initiate a request to the back end
login(){
   this.$refs.loginFormRef.validate((valid) = >{
     if(! valid)return 0
     this.$http.post('login'.this.loginForm)
    })
  }
Copy the code

5. Save the token

  • Each user has a token value that they pass in from the server, and the token should only be valid for the duration of the current site opening so it can be stored in sessionStorage
login(){
  this.$refs.loginFormRef.validate(async (valid)=>{
    if(! valid)return 0
    const {data:res}=await this.$http.post('login'.this.loginForm)
    
    // Rename data to res ES6 syntax
    if(res.meta.status! = =200)return this.$message.error('Login failed')
    this.$messgae.success('login success')
    window.sessionStorage.setItem('token',res.data.token)
    this.$router.push('/home')
    
Copy the code

6. Route navigation guard controls access permissions

  • Token does not need front-end detection, back-end and detection, as long as he passed it must be right, the user identity failure must not pass the token. So we do this in router/index.js
const router=new VueRouter({
   routes
  })
router.beforeEach((to,from,next) = >{
  if(to.path==='/login')return next()
  const tokenStr=window.sessionStorage.getItem('token')
  if(! tokenStr)return next('/login')
  next()
 })
Copy the code

7. Exit the function

  • Bind an event to the button. Clear the token first and then jump to our login page
  • window.sessionStorage.clear() this.$router.push(‘login’)

8. Configuration file in JSON format

  • The file where the. Prettierrc was created in the project root directory
{" semi ":false."singleQuote":true} semi setfalseTo remove the semicolon, use single quotes and disable themfunctionThe space error 'space-before-function-paren': 0rules:{...and so on
  }
Copy the code

9. Request the interceptor to add the token through AXIos

  • Because in the background, except for the login API, all other apis need authorization. The token must be provided in the request header using the Authorization field
main.js
axios.interceptors.request.use(config= >{
  config.headers.Authorization=window.sessionStorage.getItem('token')
  console.log(config)
  returnConfig} The server does not issue tokens during login, so authorization isnullInvoking the corresponding API after login will retrieve the corresponding tokenCopy the code

10. Save the activation status of the left menu bar in sessionStorage

  default-active
  saveNavState(activePath){
   window.sessionStorage.setItem('activePath',activePath)
   this.activePath=activePath
   
Copy the code

11. Slot usage

  • The true and false values sent from the server cannot render the switch as we want, so
<el-table-column label="State" prop="mg_state">
   <template slot-scope="scope">
      <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
   </template>
<el-table-column>
Copy the code