学习笔记-JWT 保持登录状态

目录

一、解析 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")
    @ResponseBody
    public 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 

七、前后端拦截过程图