SpringBoot和Vue实现用户个人信息展示与保存与集成JWT——基于SpringBoot和Vue的后台管理系统项目系列博客（十四）

IronmanJay

已于 2022-11-22 08:59:39 修改

阅读量3.1k

点赞数 3

分类专栏：基于SpringBoot和Vue的后台管理系统项目系列博客文章标签： spring boot vue.js java 前端后端

于 2022-11-06 09:22:41 首次发布

本文链接：https://blog.csdn.net/IronmanJay/article/details/127712276

版权

基于SpringBoot和Vue的后台管理系统项目系列博客专栏收录该内容

23 篇文章 57 订阅

订阅专栏

系列文章目录

项目资源下载

前言

今天的主要内容包括：用户个人信息展示与保存功能的实现、SpringBoot集成JWT、使用拦截器实现拦截功能、权限不足提示功能、在后台获取当前用户信息等。废话不多说，下面就开始今天的学习！

一、用户个人信息展示与保存功能的实现

首先在UserController.java中加入用户个人信息接口，用于查询用户个人信息
然后在Vue项目的views文件夹中新建Person.vue
在其中输入如下内容

<template>
    <el-card style="width: 500px;">
        <el-form label-width="80px" size="small">
            <el-form-item label="用户名">
                <el-input v-model="form.username" disabled autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="form.nickname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="form.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save">保 存</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
    export default {
        name: "Person",
        data() {
            return {
                form: {},
                user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
            }
        },
        created() {
            this.request.get("/user/username/" + this.user.username).then(res => {
                if (res.code == '200') {
                    this.form = res.data
                }
            })
        },
        methods: {
            save() {
                this.request.post("/user", this.form).then(res => {
                    if (res) {
                        this.$message.success("保存成功")
                    } else {
                        this.$message.error("保存失败")
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>

最后在index.js中加入用户信息界面的路由，注意是作为Manage.vue的子路由
最后测试一下，发现可以成功获取到当前用户的个人信息

二、SpringBoot集成JWT

在pom.xml中加入JWT的依赖
在此目录下新建TokenUtils
在TokenUtils中输入如下内容
在UserDTO中加入token属性
在UserServiceImple.java的登录函数中加入设置token的代码
然后来到前端登录测试是否会生成token，发现已经成功生成token了
在request.js中加入如下代码
来到前端登录测试发现token已经成功绑定在请求头中

三、使用拦截器实现拦截功能

在此目录下新建JwtInterceptor.java
在JwtInterceptor.java输入如下内容，要注意改成自己的包路径

package com.ironmanjay.springboot.config.Interceptor;

import cn.hutool.core.util.StrUtil;
import com.auth0.jwt.JWT;
import com.auth0.jwt.JWTVerifier;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.exceptions.JWTDecodeException;
import com.auth0.jwt.exceptions.JWTVerificationException;
import com.ironmanjay.springboot.common.Constants;
import com.ironmanjay.springboot.entity.User;
import com.ironmanjay.springboot.exception.ServiceException;
import com.ironmanjay.springboot.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.method.HandlerMethod;
import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class JwtInterceptor implements HandlerInterceptor {

    @Autowired
    private IUserService userService;

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        String token = request.getHeader("token");
        // 如果不是映射到方法直接通过
        if (!(handler instanceof HandlerMethod)) {
            return true;
        }
        // 执行认证
        if (StrUtil.isBlank(token)) {
            throw new ServiceException(Constants.CODE_401, "无token，请重新登录");
        }
        // 获取 token 中的 userId
        String userId;
        try {
            userId = JWT.decode(token).getAudience().get(0);
        } catch (JWTDecodeException j) {
            throw new ServiceException(Constants.CODE_401, "token验证失败，请重新登录");
        }
        // 根据token中的userId查询数据库
        User user = userService.getById(userId);
        if (user == null) {
            throw new ServiceException(Constants.CODE_401, "用户不存在，请重新登录");
        }
        // 用户密码加签验证token
        JWTVerifier jwtVerifier = JWT.require(Algorithm.HMAC256(user.getPassword())).build();
        try {
            jwtVerifier.verify(token); // 验证token
        } catch (JWTVerificationException e) {
            throw new ServiceException(Constants.CODE_401, "token验证失败，请重新登录");
        }
        return true;
    }
}