前端项目中使用token鉴权

vue中前端处理token过期的方法与axios请求拦截处理
前端token过期的处理(基于vue框架)和展示后端报错message
使用vuex解决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里面