前端项目中使用token鉴权

vue中前端处理token过期的方法与axios请求拦截处理
前端token过期的处理(基于vue框架)和展示后端报错message

前端项目中使用token鉴权
前端项目中使用token鉴权
4、后端判断token是否过期,响应拦截是否过期
5、路由导航守卫

登录

登录按钮

  • 写在登陆按钮的method里,把产生的token(登陆成功后产生的数据data.token)放到sessionStorage
  • 路由跳转到主页页面

前端项目中使用token鉴权

axios的请求拦截器:登录成功后存储token

把用户的每个请求的请求头 挂载上 token
写在main函数的axios导入之后
前端项目中使用token鉴权

axios响应拦截器

应对token错误或者过期

点击退出按钮token

  • 在退出按钮的methods里面,清空sessionStorage的token
  • 跳转回登录页
    前端项目中使用token鉴权

ps路由导航守卫

另一个问题,如果用户没有登陆,不能直接通过url访问
写在router.js里面
前端项目中使用token鉴权

上一篇:Button 类


下一篇:SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建【前端篇】【快速生成后端代码、封装结果集、增删改查、模糊查找】【毕设基础框架】