Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about how to achieve non-inductive refresh token, many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

Foreword:

Recently, when it comes to logging in to token, the product asks a question: can you let token expire a little longer? I have to log in frequently.

Front-end: back-end, can you set the token expiration time a little longer.

Backend: yes, but it's not safe to do that. You can do it in a better way.

Front end: what method?

Backend: refresh the interface of token and refresh token regularly

Front end: OK, let me think about it.

1. Demand

When the token expires, refresh the token, and the front end needs to refresh the token without feeling, that is, users should not be aware of it when browsing token, so as to avoid frequent login. Realization idea

Method one

The backend returns the expiration time, and the front end judges the token expiration time and calls the refresh token API.

Disadvantages: the backend needs to provide an additional field of token expiration time; local time judgment is used. If the local time is tampered with, especially if the local time is slower than the server time, the interception will fail.

Method two

Write a timer to refresh the token interface regularly

Disadvantages: waste of resources, consumption of performance, not recommended.

Method three

After intercepting in the response interceptor and judging that the token returns expired, call the refresh token API

2. Realize

The basic skeleton of axios, which uses service.interceptors.response to intercept

Import axios from 'axios'service.interceptors.response.use (response = > {if (response.data.code = 409) {return refreshToken ({refreshToken: localStorage.getItem (' refreshToken')) Token: getToken ()}) .then (res = > {const {token} = res.data setToken (token) response.headers.Authorization = `$ {token} `}) .catch (err = > {removeToken () router.push ('/ login') return Promise.reject (err)})} return response & & response.data} (error) = > {Message.error (error.response.data.msg) return Promise.reject (error)}) 3. Problem solving problem 1: how to prevent token from being refreshed multiple times

We use a variable isRefreshing to control whether the state of the token is being refreshed.

Import axios from 'axios'service.interceptors.response.use (response = > {if (response.data.code = 409) {if (! isRefreshing) {isRefreshing = true return refreshToken ({refreshToken: localStorage.getItem (' refreshToken')) Token: getToken ()}) .then (res = > {const {token} = res.data setToken (token) response.headers.Authorization = `$ {token} `}) .catch (err = > {removeToken () router.push ('/ login') return Promise.reject (err)}) .finally (() = > {isRefreshing = false })}} return response & & response.data} (error) = > {Message.error (error.response.data.msg) return Promise.reject (error)}) question 2: when two or more requests are initiated at the same time What about other interfaces?

When the second expired request comes in and the token is refreshing, we first store the request in an array queue, find a way to keep the request waiting, and wait until the token is refreshed, and then try to empty the request queue one by one. So how do you keep this request waiting? In order to solve this problem, we have to use Promise. After storing the request in the queue, a Promise is returned at the same time to keep the Promise in the Pending state (that is, the resolve is not called), and the request will wait and wait as long as we do not execute the resolve. When the refresh request interface returns, we call resolve and try again one by one.

Final code:

Flag whether import axios from 'axios'// is being refreshed let isRefreshing = false// retry queue let requests = [] service.interceptors.response.use (response = > {/ / convention code 409 token expired if (response.data.code = 409) {if (! isRefreshing) {isRefreshing = true / / call refresh token interface return refreshToken ({refreshToken: localStorage.getItem (' refreshToken')) Token: getToken ()}) .then (res = > {const {token} = res.data / / replace token setToken (token) response.headers.Authorization = `$ {token} `/ / token refresh and re-execute the methods of the array requests.forEach ((cb) = > cb (token)) requests = [] / / re-request completion Empty return service (response.config)}) .catch (err = > {/ / skip to the login page removeToken () router.push ('/ login') return Promise.reject (err)}) .finally (() = > {isRefreshing = false})} else {/ / returns the Promise for which resolve is not executed Return new Promise (resolve = > {/ / save resolve as a function into Wait for refresh and then execute requests.push (token = > {response.headers.Authorization = `${token}` resolve (service (response.config))}} return response & & response.data}, (error) = > {Message.error (error.response.data.msg) return Promise.reject (error)}) to read the above Do you have any further understanding of how to implement a non-inductively refreshed token? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.