Token验证机制

Token验证机制

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

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

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

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

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

4. 客户端收到Token,存储到本地,如cookie,sessionStorage,LocalStorage,我们选择cookie

5. 客户端每次向服务器请求API接口时,都带上Token,可以和后端协定,传参数还是headers

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

7. 服务端收到请求,验证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到期而中断退出系统