网站建设三网合一,优秀设计集锦网站,企业起名字大全免费,跨境电商快递怎么发到国外目录
一、解析 token
1. 在 JWT 工具类添加解析 token 的方法
2. 在 Controller 添加获取用户数据的方法
二、获取用户信息
1. 发起 axios 请求用户信息
2. 在路由守卫中调用方法
3. 使用
三、token 时效性
1. 设置 token 过期时间
2. 判断 token 是否过期
3. 在拦截…目录
一、解析 token
1. 在 JWT 工具类添加解析 token 的方法
2. 在 Controller 添加获取用户数据的方法
二、获取用户信息
1. 发起 axios 请求用户信息
2. 在路由守卫中调用方法
3. 使用
三、token 时效性
1. 设置 token 过期时间
2. 判断 token 是否过期
3. 在拦截器中判断返回的状态码
四、路由报错
1. 重复提示 token 已过期
2. 路由跳转报错
五、解决方案
1. 解决跳转路由报错问题
2. 提示两次 token 过期问题
六、优化路由守卫
七、前后端拦截过程图 接上次的问题使用 vuex 保存用户信息页面一刷新数据就没了
解决方案是刷新后再请求一下数据获取一下用户信息。 本次结合 JWT 来实现刷新页面后再次请求用户信息这次是基于 token 来获取用户信息
我们知道 token 里包含了用户信息那么我们只需要解析一下 token 就可以获取到数据了就不需要再次请求数据库获取数据了
如果对 token 不是很了解的同学可以看一下这篇文章 JWT 登录鉴权 本篇文章是基于这个文章 一、解析 token
1. 在 JWT 工具类添加解析 token 的方法 2. 在 Controller 添加获取用户数据的方法 RequestMapping(/GetAdminInfo)ResponseBodypublic responseDTO GetAdminInfo(String token) {Claims claims JwtUtil.parseToken(token); // 调用工具类获取 token 中的数据Object adminInfo claims.get(adminInfo); // 获取用户信息return new responseDTO(200, adminInfo, 获取成功, 0);} 二、获取用户信息
现在服务器已经可以解析 token 并返回用户信息了
那么在前端怎么设置每次刷新后请求一下用户信息呢
1. 发起 axios 请求用户信息
在 vuex 的状态管理器也就是 store 文件的 actions 中 创建一个方法该方法通过发起 axios 请求获取用户信息参数是 token 获取 token 方法 因为刷新和跳转界面都会先经过路由守卫所以在路由守卫里判断是否调用获取用户信息的方法就可以了
2. 在路由守卫中调用方法 3. 使用
然后就可以在主页使用了或者在其他页面使用 这样每次刷新或者跳转页面都会发送一个获取用户信息的请求 虽然这样实现了保持登录状态但是这属于永久性保持登录状态。一般大型网站中 token 会有时效性也就是多长时间 token 就会生效就需要重新登陆 三、token 时效性 1. 设置 token 过期时间
这里为了方便测试所以设置有效的时间为10秒这个可以设置的长一点 2. 判断 token 是否过期
如果token 过期了拦截请求并且返回信息 3. 在拦截器中判断返回的状态码 当 token 过期后提示 token过期并跳转到登录界面 四、路由报错
当 token 过期后刷新页面会跳转到登录界面
在登录页面的地址栏直接修改为主页的路径然后回车就会连续提示两次 token 已过期再然后就出现报错界面了 1. 重复提示 token 已过期
第一次出现 token 过期提示是因为 路由进行了切换我们前面设置了每次刷新或跳转路由都会发起一条请求解析 token 获取用户信息token 已经过期了所以就会提示 第二次提示 是因为进入主页面后主页面的组件会自动获取菜单数据
我们设置了请求拦截器每次发起请求都会添加一个 token服务器的拦截器会检查 token是否过期 2. 路由跳转报错
这个报错信息是 跳转到当前的路由也就是说 从 A路由 跳转到 A路由目的路由和出发路由是一样的vue 认为这是冗余的操作 五、解决方案
1. 解决跳转路由报错问题
在响应拦截器中判断跳转目的路由是否为当前路由 2. 提示两次 token 过期问题
在第一次提示 token 过期后就不要让路由再跳转到主页面了 在 vuex 的状态管理器 文件的 actions 中 获取用户信息的方法修改为同步方法 在路由守卫中调用获取用户信息的方法 添加回调函数 这样就不会连续提示两次了 六、优化路由守卫
把路由守卫的代码放在一个文件中不用和路由器放在一起 在 main.js 文件中引入文件 这是因为 引入了文件没有使用 关闭 eslint 的提示然后重启一下 vue 七、前后端拦截过程图
