前端怎样处理Token的问题

一般为了安全，后端返回的token都会有过期时间，

一.解决方案：

---

方案一：如果token 的过期时间比较长的话，可以跳转登录页重新登录，但是如果时间比较短，频繁登录会造成不好的用户体验。

---

方案二：根据用户信息自动给用户生成新token，减少登录次数

后端返回登录api一般为：

• access_token：当前使用的token，用于访问需要授权的接口
• expires_in：access_token的过期时间
• refresh_token：刷新获取新的access_token

 在方案二的情况下也存在两种解决方案

1.在axios的每个请求发起前进行拦截，根据expires_in判断token是否过期，如果过期则会刷新后再继续请求接口

• 优点：请求前拦截处理，能节省请求次数
• 缺点：后端需要提供Token过期时间字段（例如：expires_in），并且需要结合计算机本地时间判断，如果计算机时间被篡改（特别是比服务器时间满）时，拦截会失败的

2.在每个请求响应后进行拦截，如果发现请求失败（Token过期导致的）时，刷新Token再刷新请求接口

• 优点：无需Token过期时间字段，无需判断时间
• 缺点：多消耗一次请求
  这里推荐使用方法二，相比较下来，方法二更加的稳定，不会出现意外的问题

二，代码实现（以请求响应拦截为例）

//获取新的token请求
function refreshToken () {
    return service.post('/refreshtoken').then(res => res.data)
}

// 拦截返回的数据
service.interceptors.response.use(response => {
  // 接下来会在这里进行token过期的逻辑处理
  const { code } = response.data
  	-----------------------------------------------------------
  	// 说明token过期了,获取新的token
	 if (code === 401) {
		return refreshToken().then(res => {
		// 刷新token成功，将最新的token更新到header中，同时保存在localStorage中
	      const { token } = res.data
	      service.setToken(token)
	      
	      // 获取当前失败的请求
	      const config = response.config
	      //重置失败请求的配置
	      config.headers['X-Token'] = token
	      config.baseURL = '' "
	      //重试当前请求并返回promise
	      return service(config)
		}).catch( res=>{
			//重新请求token失败，跳转到登录页
			window.location.href = '/login '
		} )
	 }
	 --------------------------------------------------------------
  return response

}, error => {
  return Promise.reject(error)
})

三，问题优化

 试想一下，如果存在多个接口，这就会导致多次刷新token的情况，而我们事实上只需要刷新一次就可以

解决：在request.js中用一个变量来标记当前是否正在刷新token的状态，如果正在刷新则不再调用刷新token的接口

//在request.js

import axios from 'axios'

// 是否正在刷新的标记
let isRefreshing = false
// 重试队列，每一项将是一个待执行的函数形式
let requests = []

// 创建一个实例
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, 
    timeout: 5000 // request timeout
})

// 从localStorage中获取token
function getLocalToken () {
    const token = window.localStorage.getItem('token')
    return token
}

// 给实例添加一个setToken方法，用于登录后将最新token动态添加到header，同时将token保存在localStorage中
service.setToken = (token) => {
  instance.defaults.headers['X-Token'] = token
  window.localStorage.setItem('token', token)
}

//获取新的token请求
function refreshToken () {
    return service.post('/refreshtoken').then(res => res.data)
}

// 拦截返回的数据
service.interceptors.response.use(response => {
  // 接下来会在这里进行token过期的逻辑处理
  const { code } = response.data
	-----------------------------------------------------------
  	// 说明token过期了,获取新的token
	 if (code === 401) {
	 	const config = response.config
	 	//判断一下状态
		if( !isRefreshing ){
			//修改状态，进入更新token阶段
			isRefreshing = true
			// 获取当前的请求
			return refreshToken().then(res => {
			// 刷新token成功，将最新的token更新到header中，同时保存在localStorage中
		      const { token } = res.data
		      service.setToken(token)
		      
		      //重置失败请求的配置
		      config.headers['X-Token'] = token
		      config.baseURL = '' "
		      
		      //已经刷新了token，将所有队列中的请求进行重试
		      requests.forEach(cb => cb(token))
		      // 重试完了别忘了清空这个队列
		      requests = []
		      
		      return service(config)
			}).catch( res=>{
				//重新请求token失败，跳转到登录页
				window.location.href = '/login '
			} ).finally( ()=>{
				//完成之后在关闭状态
				isRefreshing = false
			} )
		} else{
			 // 正在刷新token，返回一个未执行resolve的promise
			 return new Promise((resolve) => {
	         // 将resolve放进队列，用一个函数形式来保存，等token刷新后直接执行
		         requests.push((token) => {
			          config.baseURL = ''
			          config.headers['X-Token'] = token
			          resolve(instance(config))
		       	 })
	     	 })
		}
	 }
	 --------------------------------------------------------------
  return response
}, error => {
  return Promise.reject(error)
})

//暴露
export default service