前端项目中使用token鉴权
5 发送用户名密码 存储 请求拦截 响应拦截 销毁
4、后端判断token是否过期,响应拦截是否过期 5、路由导航守卫
登录
登录按钮
写在登陆按钮的method里,把产生的token(登陆成功后产生的数据data.token)放到sessionStorage 路由跳转到主页页面
axios的请求拦截器:登录成功后存储token
把用户的每个请求的请求头 挂载上 token 写在main函数的axios导入之后
axios响应拦截器
应对token错误或者过期 如果过期则清除前端的token并跳转到登录页(可以加一些弹窗操作)
//响应时的拦截
util.ajax.interceptors.response.use(response => {
//对响应数据做操作
if (response.data.msg == 登录失效) {
//这里是判断后台的token是否过期
Cookies.remove("status"); //如果过期则清除前端的token并跳转到登录页
//这里需要说明一下,如果你是用的是hash模式,使用下面的就可以了 ,如果使用的是history 模式则使用window.location.href=/login;就可以了
window.location.href=#/login;
}
return response;
点击退出按钮token
在退出按钮的methods里面,清空sessionStorage的token 跳转回登录页
ps路由导航守卫
另一个问题,如果用户没有登陆,不能直接通过url访问 写在router.js里面
