【项目实战】一、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)

目录
相关文章
|
16天前
|
JSON 安全 Java
什么是JWT?如何使用Spring Boot Security实现它?
什么是JWT?如何使用Spring Boot Security实现它?
67 5
|
2月前
|
JSON 安全 算法
|
22天前
|
JSON 安全 算法
Spring Boot 应用如何实现 JWT 认证?
Spring Boot 应用如何实现 JWT 认证?
48 8
|
1月前
|
Java 应用服务中间件
SpringBoot获取项目文件的绝对路径和相对路径
SpringBoot获取项目文件的绝对路径和相对路径
87 1
SpringBoot获取项目文件的绝对路径和相对路径
|
26天前
|
分布式计算 JavaScript 前端开发
vue学习第8章(vue的购物车案例)
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,正向全栈进发。本篇分享一个综合练习小demo,包括目录结构、HTML、JS及CSS代码,通过增删商品实现总价计算。关注我,获取更多前端知识!🎉🎉🎉
23 1
|
1月前
|
JSON 安全 Go
Go语言中使用JWT鉴权、Token刷新完整示例,拿去直接用!
本文介绍了如何在 Go 语言中使用 Gin 框架实现 JWT 用户认证和安全保护。JWT(JSON Web Token)是一种轻量、高效的认证与授权解决方案,特别适合微服务架构。文章详细讲解了 JWT 的基本概念、结构以及如何在 Gin 中生成、解析和刷新 JWT。通过示例代码,展示了如何在实际项目中应用 JWT,确保用户身份验证和数据安全。完整代码可在 GitHub 仓库中查看。
121 1
|
1月前
|
分布式计算 关系型数据库 MySQL
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型 图像处理 光通信 分布式计算 算法语言 信息技术 计算机应用
51 8
|
1月前
|
存储 运维 安全
Spring运维之boot项目多环境(yaml 多文件 proerties)及分组管理与开发控制
通过以上措施,可以保证Spring Boot项目的配置管理在专业水准上,并且易于维护和管理,符合搜索引擎收录标准。
41 2
|
2月前
|
JavaScript 前端开发 Java
解决跨域问题大集合:vue-cli项目 和 java/springboot(6种方式) 两端解决(完美解决)
这篇文章详细介绍了如何在前端Vue项目和后端Spring Boot项目中通过多种方式解决跨域问题。
388 1
解决跨域问题大集合:vue-cli项目 和 java/springboot(6种方式) 两端解决(完美解决)
|
1月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
49 2