【学生管理系统】整合JWT(完)

目录

[5. 整合JWT](#5. 整合JWT)

[5.1 生成Token](#5.1 生成Token)

[5.2 携带Token](#5.2 携带Token)

[5.2.1 保存token](#5.2.1 保存token)

[5.2.2 携带token](#5.2.2 携带token)

[5.3 校验Token](#5.3 校验Token)

[5.4 获得Token](#5.4 获得Token)

5. 整合JWT

5.1 生成Token

  • 用户登录成功后,通过工具类,将用户信息转换成token

  • 步骤:

    • 拷贝工具类,及其Properties类

    • yml配置

    • 登录生成token

  • 拷贝工具类,及其Properties类

    • 注意:Swagger处理标准请求头,不再是X-Token

  • yml配置

  • 登录生成token

5.2 携带Token

5.2.1 保存token

  • 用户登录成功后,将token保存浏览器

  • 通过浏览器查看保存的数据

5.2.2 携带token

  • 对axios进行增强,需要每次都写到token

  • 步骤:

    1. 编写nuxt的插件

    2. 注册插件

  1. 编写nuxt的插件

    复制代码
    //https://axios.nuxtjs.org/helpers
    //https://axios.nuxtjs.org/extend
    export default function ({ $axios, redirect }) {
        $axios.onRequest(config => {
            // 从 localStorage 获得token,并添加到头
            let token = localStorage.getItem('token')
            if(token) {
                //Adds header: `Authorization: 123` to all requests
                $axios.setToken(token)
            }
        })
      
        $axios.onError(error => {
          const code = parseInt(error.response && error.response.status)
          if (code === 400) {
            redirect('/400')
          }
        })
    }
  2. 注册插件

    复制代码
    { src: '~/plugins/axios.js', mode: 'client' }
  • 测试:每次请求都携带token

5.3 校验Token

  • 在Gateway编写过滤器,注意:处理的请求头名字为Authorization

5.4 获得Token

复制代码
TbUser tbUser = JwtUtils.getObjectFromToken(token, jwtProperties.getPublicKey() , TbUser.class);
相关推荐
倚肆14 小时前
Spring Boot CORS 配置详解:CorsConfigurationSource 全面指南
java·spring boot·后端
q***721914 小时前
Spring Boot(快速上手)
java·spring boot·后端
CoderYanger14 小时前
C.滑动窗口——1423. 可获得的最大点数
java·开发语言·算法·leetcode·1024程序员节
Swift社区14 小时前
StackOverflowError 栈溢出的原因与实战解决方案
java·spring boot·spring
字节拾光录15 小时前
手机号存储避坑指南:从20亿级数据库实践看,为什么VARCHAR才是终极答案
java·数据库·oracle
p***976115 小时前
SpringBoot(7)-Swagger
java·spring boot·后端
j***294815 小时前
springboot集成onlyoffice(部署+开发)
java·spring boot·后端
T***u33315 小时前
前端框架在性能优化中的实践
javascript·vue.js·前端框架
jingling55516 小时前
vue | 在 Vue 3 项目中集成高德地图(AMap)
前端·javascript·vue.js