【项目实战】一、Spring boot整合JWT、Vue案例展示用户鉴权(中)

简介: 【项目实战】一、Spring boot整合JWT、Vue案例展示用户鉴权(中)

2.4、添加controller

import com.alibaba.nacos.shaded.com.google.gson.Gson;
import com.xxxx.authorityservice.config.JwtConfig;
import com.xxxx.commonapi.dto.ResultDTO;
import com.xxxx.commonapi.dto.TokenDTO;
import com.xxxx.commonapi.entity.UserInfo;
import com.xxxx.commonapi.http.HttpResultGenerator;
import com.xxxx.commonapi.http.HttpStatusEnum;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.Map;
@RestController
@RequestMapping("/auth")
public class AuthController {
    @Autowired
    private JwtConfig jwtConfig;
    /**
     * 登录
     */
    @PostMapping("/login")
    public ResultDTO login(@RequestBody UserInfo userInfo){
        String token = jwtConfig.createToken(new Gson().toJson(userInfo));
        Map<String, String> map = new HashMap();
        map.put("token",token);
        return HttpResultGenerator.success(HttpStatusEnum.SUCCESS,map);
    }
    /**
     * token是否正确
     */
    @PostMapping("/isRight")
    public ResultDTO isRight(){
        return HttpResultGenerator.success(HttpStatusEnum.SUCCESS,"成功!");
    }
    /**
     * token解密
     */
    @PostMapping("/getUserMessageByToken")
    public ResultDTO getUserMessageByToken(HttpServletRequest request){
        String name = jwtConfig.getUserNameFromToken(request.getHeader("token"));
        return HttpResultGenerator.success(HttpStatusEnum.SUCCESS,name);
    }
    /**
     * token是否过期
     */
    @PostMapping("/isTokenExpiration")
    public Boolean isTokenExpiration(@RequestBody TokenDTO tokenDTO){
        return this.jwtConfig.isTokenExpired(this.jwtConfig.getExpirationDateFromToken(tokenDTO.getToken()));
    }
}

3、gateway工程改造

3.1、修改配置文件

这里是在nacos配置中心写的配置文件

添加下图红框内容

- id: auth-service_routh   #路由 id,没有固定规则,但唯一,建议与服务名对应
            uri: lb://authority-service           #匹配后提供服务的路由地址
            predicates:
              #以下是断言条件,必auth选全部符合条件
              - Path=/auth/**               #断言,路径匹配 注意:Path 中 P 为大写
              - Method=GET,POST #只能时 GET,POST 请求时,才能访问

3.2、新建AuthService接口

import com.xxxx.commonapi.dto.TokenDTO;
import org.springframework.cloud.openfeign.FeignClient;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
/**
 * @author kelvin
 * @Date 2023/6/8 - 10:09
 */
@FeignClient(value = "authority-service")
public interface AuthService {
    @PostMapping("/auth/isTokenExpiration")
    public Boolean validateToken(@RequestBody TokenDTO tokenDTO);
}

注意事项:

接口中的value值必须与服务名完全相同!
方法中的参数必须与authority-service服务的/auth/isTokenExpiration接口的参数对应上,最好使用RequestBody接收,否则参数过长可能导致失败!

3.3、新建filter目录,新建DrfGlobalFilter全局拦截器

import com.alibaba.nacos.api.utils.StringUtils;
import com.alibaba.nacos.shaded.com.google.gson.Gson;
import com.xxxx.commonapi.dto.TokenDTO;
import com.xxxx.commonapi.http.HttpResultGenerator;
import com.xxxx.commonapi.http.HttpStatusEnum;
import com.xxxx.gatewayservice.service.AuthService;
import lombok.SneakyThrows;
import org.springframework.cloud.gateway.filter.GatewayFilterChain;
import org.springframework.cloud.gateway.filter.GlobalFilter;
import org.springframework.core.Ordered;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.server.reactive.ServerHttpRequest;
import org.springframework.http.server.reactive.ServerHttpResponse;
import org.springframework.stereotype.Component;
import org.springframework.web.server.ServerWebExchange;
import reactor.core.publisher.Mono;
import javax.servlet.http.HttpServletResponse;
import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;
@Component
public class DrfGlobalFilter implements GlobalFilter, Ordered {
    private final AuthService authService;
    private ExecutorService executorService;
    public DrfGlobalFilter(AuthService authService) {
        this.authService = authService;
        this.executorService = Executors.newFixedThreadPool(5);
    }
    @Bean
    @ConditionalOnMissingBean
    public HttpMessageConverters messageConverters(ObjectProvider<HttpMessageConverter<?>> converters) {
        return new HttpMessageConverters(converters.orderedStream().collect(Collectors.toList()));
    }
    @SneakyThrows
    @Override
    public Mono<Void> filter(ServerWebExchange exchange, GatewayFilterChain chain) {
        ServerHttpRequest request = exchange.getRequest();
        //如果登录请求,不用验证token
        String path = request.getURI().getPath();
        if(!path.contains("login")){
            HttpHeaders headers = request.getHeaders();
            String token = headers.getFirst("token");
            //token为空表示没有登录,否则已经登录
            if(StringUtils.isBlank(token)){
                ServerHttpResponse response = exchange.getResponse();
                response.setStatusCode(HttpStatus.UNAUTHORIZED);
                return response.setComplete();
            }else{
                TokenDTO tokenDTO = new TokenDTO();
                tokenDTO.setToken(token);
                Boolean f = authService.validateToken(tokenDTO);
                if(f){
                    ServerHttpResponse response = exchange.getResponse();
                    response.setStatusCode(HttpStatus.UNAUTHORIZED);
                    HttpServletResponse response1 = (HttpServletResponse) response;
                    response1.getWriter().write(new Gson().toJson(HttpResultGenerator.fail(HttpStatusEnum.REQUEST_METHOD_SUPPORT_ERROR)));
                    return response.setComplete();
                }
            }
        }
        return chain.filter(exchange);
    }
    @Override
    public int getOrder() {
        return 0;
    }
}

4、Postman测试

5、创建vue3项目,与后台JWT鉴权交互

5.1、进入cmd界面,进入到存放前端项目的文件夹

5.2、安装vue脚手架vue-cli3

cnpm install @vue/cli -g 注:安装过的可以不用再安装

安装后查看vue的版本

vue -V

5.3、创建Vue项目,项目名称不支持特殊字符也不支持驼峰命名

vue create 项目名称

选择vue3

5.4、vue项目引入Element-Plus

打开终端进入项目文件夹

5.4.1、安装element-plus

cnpm install element-plus --save

安装后在package.json中可以看到element-plus的版本

5.4.2、在main.js中导入element-plus并使用

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

目录
相关文章
|
8天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,包括版本兼容性、安全性、性能调优等方面。
62 1
|
5天前
|
JavaScript
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
11 1
|
9天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用
【10月更文挑战第8天】本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,通过 Spring Initializr 创建并配置 Spring Boot 项目,实现后端 API 和安全配置。接着,使用 Ant Design Pro Vue 脚手架创建前端项目,配置动态路由和菜单,并创建相应的页面组件。最后,通过具体实践心得,分享了版本兼容性、安全性、性能调优等注意事项,帮助读者快速搭建高效且易维护的应用框架。
18 3
|
1月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的大学竞赛报名管理系统
基于Java+Springboot+Vue开发的大学竞赛报名管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的大学竞赛报名管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
129 3
基于Java+Springboot+Vue开发的大学竞赛报名管理系统
|
1月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的蛋糕商城管理系统
基于Java+Springboot+Vue开发的蛋糕商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的蛋糕商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
90 3
基于Java+Springboot+Vue开发的蛋糕商城管理系统
|
1月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的美容预约管理系统
基于Java+Springboot+Vue开发的美容预约管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的美容预约管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
42 3
基于Java+Springboot+Vue开发的美容预约管理系统
|
10天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用
【10月更文挑战第7天】本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,通过 Spring Initializr 创建 Spring Boot 项目并配置 Spring Security。接着,实现后端 API 以提供菜单数据。在前端部分,使用 Ant Design Pro Vue 脚手架创建项目,并配置动态路由和菜单。最后,启动前后端服务,实现高效、美观且功能强大的应用框架。
13 2
|
1月前
|
JavaScript 前端开发 Java
一个基于 SpringBoot + Vue 的在线考试系统
【9月更文挑战第24天】这是一个基于 Spring Boot 和 Vue 构建的在线考试系统。后端采用 Spring Boot、Spring Data JPA 和 MySQL 实现快速开发和数据库操作;前端使用 Vue.js 和 Element UI 快速搭建界面。系统包括用户管理、考试管理、考试答题和成绩管理等功能模块,并设计了相应的数据库表结构。通过 RESTful API 实现前后端数据交互,支持多种题型和权限管理,适用于学校和企业等场景。
|
1月前
|
JavaScript
vue 计算属性,实现复选框的全选和反选 【小案例】
本文通过一个Vue.js小案例,展示了如何使用计算属性实现复选框的全选和反选功能。计算属性的完整写法包括get和set两部分,分别用于获取值和设置值。在全选和反选的场景中,计算属性的get方法用于判断所有复选框是否都已选中,从而控制全选复选框的状态;计算属性的set方法则用于根据全选复选框的状态,批量更新每个复选框的选中状态。通过示例代码和效果图,文章清晰地说明了计算属性在实现这一功能中的作用和效果。
vue 计算属性,实现复选框的全选和反选 【小案例】
|
13天前
|
JavaScript
【有手就行系列】Vue快速入门案例
【有手就行系列】Vue快速入门案例
18 0