如何使用TokenPocket官网进行链下交互？ Token验证机制

Token验证机制 后端服务器判断用户关键信息(比如说用户id，用户名，过期时间等等)，返回给前端 前端获取token，存储在localStorage和Vuex中 在进行路由跳转时候，去判断localStorage有无token，没有则跳转到登录页，有则获取用户信息，改变登录状态 每次请求接口，在axios请求头携带token 后端接口判断请求头有无token，没有或者token过期，返回401 前端拿到401状态码，重定向到登录页

在vue-cli项目实现登录的过程中用到了token验证，总结如下:

客户端以用户名与密码为参数请求登录API

服务端收到登录请求去验证用户名与密码

验证通过，服务端会生成Token，把这个Token响应给客户端

客户端收到Token，存储到本地，如cookie，sessionStorage，LocalStorage，tp官网下载最新版本安装我们选择cookie

客户端每次向服务器请求API接口时， tp官方下载安卓最新版本都带上Token，可以和后端协定，传参数还是headers

客户端每次跳转路由的时候也要验证Token登录态

服务端收到请求，验证Token，如果通过就返回数据，否则返回错误状态，客户端依次去处理

第一步:通过用户名+密码获取token，存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'})
  }
})

第二步:路由跳转进行登录态校验

首先比较一下

router.beforeEach((to，from，next)=>{
	let isLogin=xes.getCookies('token')
	if(!isLogin){
		//如果是登录页面路径，就直接跳下一步
		next('/login');
	}else{
		next()
	}
})

router.beforeEach({to，from，next}=>{
	let isLogin=xes.getCookies('token')
	if(!isLogin){
		//如果是登录页面路径，就直接跳下一步
		if(to.path==='/login'){
			next();
		}else{
			next('/login');
		}
	}else{
		next()
	}
})

结果:第一段代码在页面进行路由跳转的时候会陷入死循环

原因:next后面带路径跳转时会重新调用router.beforeEach，next后不带参数跳转时不会执行beforeEach

第三步:axios请求拦截器配置token，校验请求时的登录态

axios.interceptors.request.use((config)=>{
	// 以防cookie失效，所以每次发请求都重新获取token
	if(xes.getCookies('token')){
		config.headers.common['Authorization']='Token'+xes.getCookies('token');
	}
	return config
}，(error)=>{
	Message.error({
		message:'加载超时'
	})
	return Promise.reject(error)
})

axios请求头部token的设置--因为axios.defaults.headers设置只在页面初始化的时候获取一次，会导致在页面发起请求的时候不会重新去获取登陆态，

这样就出现个问题，不论是处在登录态，已经登录的状态会一直存在，

为了避免这个问题，就需要在请求内部去设置获取token，于是把携带token的头部设置放在axios的请求拦截器里，每次请求都重新获取以便拿到最新的登录态

这里有个坑就是在请求拦截器里设置头部要用自定义设置，而不能用axios.defaults.headers默认设置，

因为默认设置是优先于请求拦截器质性的，假如用了默认设置，其实设置的是下一次请求的请求头而非本次请求(token是在axios.defaults.headers中携带的)

第四步:axios响应拦截器更新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
})

这样做是考虑到用户体验，防止用户在使用系统过程中由于cookie到期而中断退出系统