Here is the working process of analyzing tokens:

Login authentication and token value storage are implemented first

Vue, VUE-CLI, AXIos and element-UI are used in the project. The login area of the form is shown as follows. As the verification rule of :rule is configured, the input data should be pre-verified after clicking login.

<el-form ref="loginRef" :model="loginForm" :rules="loginRules" label-width="0px"
         class="login-form">
             <! -- User name -->
            <el-form-item prop="username">
                <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
            </el-form-item>
            <! - password - >
             <el-form-item prop="password">
                <el-input v-model="loginForm.password" type="password"
                prefix-icon="iconfont icon-lock_fill">
                </el-input>
            </el-form-item>
            <el-form-item class="btn">
                <el-button type="primary" @click="login">The login</el-button>
                <el-button type="info" @click="reset">reset</el-button>
            </el-form-item>
         </el-form>
Copy the code

$refs = $refs; $refs = $refs; $refs = $refs; $refs = $refs; $refs = $refs; The callback function gets the result of the pre-validation valid, which is a Boolean value: true for pre-validation success and false for pre-validation failure. Returns if prevalidation fails, and sends an AXIos request requesting data if prevalidation succeeds.

 login() {
      this.$refs.loginRef.validate(async (valid) => {
        if(! valid)return;
        const { data: res } = await this.$http.post('login'.this.loginForm);
        // console.log(res);
        // Set a pop-up message indicating success or failure
        if(res.meta.status ! = =200) this.$message.error('Login failed! ');
        else { this.$message.success('Login successful'); }
        // 1. Save the token to the sessionStorage client
        // All apis in project 1, 1, except login, must be accessed after login
        // Tokens 1 and 2 are valid only for the duration of the current page, so store tokens in sessionStorage
        window.sessionStorage.setItem('token', res.data.token);
        // go to "/home"
        this.$router.push('/home'); 
      });
    }
Copy the code

The process of requesting data is as shown in the figure above. The data is sent to the server for login verification. The data returned by the server contains a token value, and the client needs to store this token value. Where will the client be able to store the data? Cookie, sessionStorage, localStorage.

Select sessionStorage, because sessionStorage has a time limit, when the session ends, the storage will be emptied. The page session remains as long as the browser is open, and the original page session remains when the page is reloaded or restored.

Store the token value with sessionstorage.setitem ().

In this way, in the SPA page, only if there is a token value, the login page can be redirected to other pages. This can be realized through the front route guard. If there is a token value, the login page is released, and if there is no token value, the login page is redirected (to).

1. Send a login request; 2. The server verifies and returns the token value; 3, client store token value (store in sessionStorage)

Send the request with the token value for the server to verify

axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/';
 // Set an interceptor to the prototype object before mounting it
axios.interceptors.request.use(config= >{
  // console.log(config)
  config.headers.Authorization = window.sessionStorage.getItem('token');
  return config
})
Vue.prototype.$http = axios;
Copy the code

When configuring Axios, add a request interceptor that adds tokens to the authorization item in the request header (obtained from sessionStorage) before sending the request so that the request carries the token value.