Springboot+Vue+JWT实现用户登录鉴权

等雨停、

于 2024-09-08 21:52:06 发布

阅读量493

点赞数 10

文章标签：状态模式

本文链接：https://blog.csdn.net/weixin_66106394/article/details/142033871

版权

登录相关功能的优化

登录后显示当前登录用户

el-dropdown: Element - The world's most popular Vue UI framework

<el-dropdown style="float: right; height: 60px; line-height: 60px">
<span class="el-dropdown-link" style="color: white; font-size: 16px">{{ user.name }}<i class="el-icon-arrow-down el-icon--right"></i></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<div @click="logout">退出登录</div>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>

登录成功后，将登录的用户信息存储到前端的localStorage里

localStorage.setItem("user", JSON.stringify(res.data));

登录成功后，从localStorage里获取当前的登录用户

data () {
    return {
        user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
    }
},

退出登录后，清localStorage，跳到登录页

methods: {
    logout() {
        localStorage.removeItem("user");
        this.$router.push("/login");
    }
}

这样安全吗？？
肯定不安全，用户可以跳过登录，直接在浏览器上输入后台的路由地址，即可直接进入系统，访问敏感数据。

前端路由守卫

在路由配置文件index.js里，配上路由守卫

// 路由守卫
router.beforeEach((to ,from, next) => {
    if (to.path ==='/login') {
        next();
    }
    const user = localStorage.getItem("user");
    if (!user && to.path !== '/login') {
        return next("/login");
    }
    next();
})

这样就安全了吗？？
还是不安全，因为前端的数据是不安全的，是可以认为篡改的！就是说，鉴权放在前端，是不安全的。我们的登录鉴权肯定是要放在服务端来完成。

使用jwt在后端进行鉴权

在用户登录后，后台给前台发送一个凭证（token），前台请求的时候需要带上这个凭证（token），才可以访问接口，如果没有凭证或者凭证跟后台创建的不一致，则说明该用户不合法。

pom.xml

<dependency>
<groupId>com.auth0</groupId>
<artifactId>java-jwt</artifactId>
<version>3.10.3</version>
</dependency>
<dependency>
<groupId>cn.hutool</groupId>
<artifactId>hutool-all</artifactId>
<version>5.3.7</version>
</dependency>

给后台接口加上统一的前缀/api，然后我们统一拦截该前缀开头的接口，所以配置一个拦截器

import org.springframework.context.annotation.Configuration;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.config.annotation.PathMatchConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements  WebMvcConfigurer {
    @Override
    public void configurePathMatch(PathMatchConfigurer configurer) {
        // 指定controller统一的接口前缀
        configurer.addPathPrefix("/api", clazz -> clazz.isAnnotationPresent(RestController.class));
    }
}

request封装里面，baseUrl也需要加个 /api 前缀

Jwt配置

JwtTokenUtils.java
jwt的规则

import cn.hutool.core.date.DateUtil;
import cn.hutool.core.util.StrUtil;
import com.auth0.jwt.JWT;
import com.auth0.jwt.algorithms.Algorithm;
import com.example.entity.Admin;
import com.example.service.AdminService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;

import javax.annotation.PostConstruct;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.util.Date;

@Component
public class JwtTokenUtils {

    private static AdminService staticAdminService;
    private static final Logger log = LoggerFactory.getLogger(JwtTokenUtils.class);

    @Resource
    private AdminService adminService;

    @PostConstruct
    public void setUserService() {
        staticAdminService = adminService;
    }

    /**
     * 生成token
     */
    public static String genToken(String adminId, String sign) {
        return JWT.create().withAudience(adminId) // 将 user id 保存到 token 里面,作为载荷
        .withExpiresAt(DateUtil.offsetHour(new Date(), 2)) // 2小时后token过期
        .sign(Algorithm.HMAC256(sign)); // 以 password 作为 token 的密钥
    }

    /**
     * 获取当前登录的用户信息
     */
    public static Admin getCurrentUser() {
        String token = null;
        try {
            HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();
            token = request.getHeader("token");
            if (StrUtil.isBlank(token)) {
                token = request.getParameter("token");
            }
            if (StrUtil.isBlank(token)) {
                log.error("获取当前登录的token失败， token: {}", token);
                return null;
            }
            // 解析token，获取用户的id
            String adminId = JWT.decode(token).getAudience().get(0);
            return staticAdminService.findByById(Integer.valueOf(adminId));
        } catch (Exception e) {
            log.error("获取当前登录的管理员信息失败, token={}", token,  e);
            return null;
        }
    }
}

用户在登录成功后，需要返回一个token给前台

// 生成jwt token给前端
String token = JwtTokenUtils.genToken(user.getId().toString(), user.getPassword());
user.setToken(token);

前台把token获取到，下次请求的时候，带到header里

const user = localStorage.getItem("user");
if (user) {
  config.headers['token'] = JSON.parse(user).token;
}

拦截器：JwtInterceptor.java

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.JWTVerificationException;
import com.example.entity.Admin;
import com.example.exception.CustomException;
import com.example.service.AdminService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.HandlerInterceptor;

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

/**
 * jwt拦截器
 */
@Component
  public class JwtInterceptor implements HandlerInterceptor {

  private static final Logger log = LoggerFactory.getLogger(JwtInterceptor.class);

  @Resource
    private AdminService adminService;

  @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
    // 1. 从http请求的header中获取token
    String token = request.getHeader("token");
    if (StrUtil.isBlank(token)) {
      // 如果没拿到，我再去参数里面拿一波试试  /api/admin?token=xxxxx
      token = request.getParameter("token");
    }
    // 2. 开始执行认证
    if (StrUtil.isBlank(token)) {
      throw new CustomException("无token，请重新登录");
    }
    // 获取 token 中的userId
    String userId;
    Admin admin;
    try {
      userId = JWT.decode(token).getAudience().get(0);
      // 根据token中的userid查询数据库
      admin = adminService.findById(Integer.parseInt(userId));
    } catch (Exception e) {
      String errMsg = "token验证失败，请重新登录";
      log.error(errMsg + ", token=" + token, e);
      throw new CustomException(errMsg);
    }
    if (admin == null) {
      throw new CustomException("用户不存在，请重新登录");
    }
    try {
      // 用户密码加签验证 token
      JWTVerifier jwtVerifier = JWT.require(Algorithm.HMAC256(admin.getPassword())).build();
      jwtVerifier.verify(token); // 验证token
    } catch (JWTVerificationException e) {
      throw new CustomException("token验证失败，请重新登录");
    }
    return true;
  }
}

如何生效？在webConfig里添加拦截器规则：

@Resource
private JwtInterceptor jwtInterceptor;

// 加自定义拦截器JwtInterceptor，设置拦截规则
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(jwtInterceptor).addPathPatterns("/api/**")
.excludePathPatterns("/api/admin/login")
.excludePathPatterns("/api/admin/register");
}

CorsConfig.java

设置自定义头

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}