Token Verification Mechanism

Token verification was recently used in the login process of the Vue-cli project, which is summarized as follows:

1. when you log on, the client uses the user name and password to log on. 2. the server receives a request to verify the user name and password. 3. after the verification is passed, the server issues a token and sends the token to the client in response. 4. the client receives the token and stores it locally, such as Cookie, sessionstorage, and localstorage. cookie5. each time the client requests an API, it must carry token.6. the client also needs to verify the token logon status every time it redirects to the route. the server receives the request and verifies the token. If the request passes, data is returned. Otherwise, an error message is returned.

Step 1: Use the user name + password to get the token and store the cookie

axios.post(this.Service.SERVER.login, {    username: this.ruleForm.username,    password: this.ruleForm.password}).then((res) => {    if(res.token) {        this.xes.setCookies('token', res.token, 2)        this.$router.push({name: 'approveOnline'})    }})

Step 2: Route redirect for Logon status verification

First, compare the two codes in the lower part of the pipeline.

Router. beforeeach (to, from, next) = & gt; {Let islogin = xes. getcookies ('Token') if (! Islogin) {// if it is the logon page path, directly jump to next ('/login');} else {next ()}})

Router. beforeeach (to, from, next) = & gt; {Let islogin = xes. getcookies ('Token') if (! Islogin) {// if it is the logon page path, directly jump to the next step if (. path = '/login') {next ();} else {next ('/login') ;}} else {next ()}})

Result: When the first code jumps to the page, it will be in an endless loop.
Cause: Router. beforeeach will be re-called when next is followed by a jump with a path. beforeeach will not be executed when next is followed by a jump without a parameter

Step 3: configure the token for the Axios request interceptor to verify the logon status of the request.

Axios. interceptors. request. use (config) = & gt; {// In case of cookie failure, the token if (xes. getcookies ('Token') {config. headers. common ['authorization'] = 'Token' + xes. getcookies ('Token');} return config}, (error) = & gt; {message. error ({message: 'loading timeout'}) return promise. reject (error )})

Difficulties encountered here:
Set the token of the Axios Request Header -- Because Axios. defaults. the headers setting is obtained only once during page initialization. This will cause the page to not get the login status again when initiating a request. In this case, a problem occurs, whether or not the request is in the login status, the logged-in status always exists. To avoid this problem, you need to set the token in the request to obtain the token. Therefore, you need to set the header containing the token in the request interceptor of Axios, each request is re-obtained to obtain the latest login status. Here, there is a pitfall that is to set the header in the request interceptor to use custom settings, rather than using Axios. defaults. headers is set by default, because the default setting takes precedence over request blocker execution. If the default setting is used, in fact, we set the request header of the next request instead of the current request (the token is in Axios. defaults. headers)

Step 4: Axios response interceptor updates cookie

axios.interceptors.response.use((res) => {    var _url = res.config.url.replace(axios.defaults.baseURL, '')    if (res.data.stat == 1) {        xes.setCookies('token', xes.getCookies('token'), 2)    }    return res.data}

In this way, the user experience is taken into account to prevent users from suspending and exiting the system due to Cookie expiration.

Summary

Because the backend of this development only checks whether to log on based on the token passed by the front-end interface, and does not perform logon verification, there are many considerations. Please confirm if you are not careful

Original article address: 1190000016814541

Token Verification Mechanism