JWT
JSON Web Token是目前最为流行的跨域认证解决方案
如何获取:在使用JWT身份验证中,当用户使用其凭据成功登录时,将返回JSON Web Token(令牌)
Token本质就是一个包含了信息的字符串
如何获取Token:登录成功之后,服务器返回
作用:使用令牌(token)访问页面,调用接口
服务的通过请求头携带的token来判断当前用户是真用户还是假用户
首页页面访问控制思路
其中token放在本地存储中
调用接口时传递token
token过期验证(token是有时效的)
判断token失效后,清除存储数据,然后跳转到登录页
axios拦截器
作用:在请求发送之前,响应回来之后执行一些公共逻辑
请求拦截器
每次请求之前都会经过请求拦截器的代码,config中包含请求的内容
可以在请求拦截器中加入token(但是有一种情况,还没登录的时候,还没生成token,会造成js代码执行逻辑上的一些错误)
// 添加请求拦截器
axios.interceptors.request.use(config=> {
// 在发送请求之前做些什么
return config;
}, err=> {
// 对请求错误做些什么
return Promise.reject(error);
});
响应拦截器
可以统一处理token失效和数据剥离
// 添加响应拦截器
axios.interceptors.response.use(response=> {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, error=> {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});
统一处理token失效
数据剥离
axios返回成功的res中只有一部分是后台返回给的数据,数据都是经过axios包装的数据
数据剥离就是将res.data.data.overflow—>res.data.overflow (在响应拦截器成功的函数中剥离data)