SaToken+SpringBoot+Redis前后端分离登录认证

已于 2024-05-23 14:34:49 修改
阅读量1.4k 收藏 26
点赞数 22
文章标签： spring boot redis 后端
于 2024-05-23 14:33:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50281408/article/details/139147077
版权

目录

前言

Sa-Token 是一款 Java 语言的权限认证框架，提供了灵活、高效、易用的权限认证和会话管理功能。它是 SpringBoot、Spring MVC、Servlet 等 Java 技术体系下的轻量级权限认证组件，可以帮助开发者快速实现用户认证、授权和会话管理等功能。

logo

Sa-Token官方文档

功能结构图

img

认证流程图

sa-token-rz

框架特性

image-20240523135615846

一、创建工程项目🎍

1.1 创建后端工程

引入依赖

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.6.13</version>
    <relativePath/> <!-- lookup parent from repository -->
</parent>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Sa-Token 权限认证，在线文档：https://sa-token.cc -->
<dependency>
    <groupId>cn.dev33</groupId>
    <artifactId>sa-token-spring-boot-starter</artifactId>
    <version>1.38.0</version>
</dependency>

<dependency>
    <groupId>cn.dev33</groupId>
    <artifactId>sa-token-redis-fastjson2</artifactId>
    <version>1.37.0</version>
</dependency>
<!--无论使用哪种序列化方式，你都必须为项目提供一个 Redis 实例化方案-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>

注：如果你使用的是 SpringBoot 3.x，只需要将 sa-token-spring-boot-starter 修改为 sa-token-spring-boot3-starter 即可。

基础配置

server:
  port: 8081
spring:
  redis:
    database: 1
    host: 127.0.0.1
    port: 6379
    password:
    timeout: 5000
    jedis:
      pool:
        max-active: 8
        max-wait: -1
        max-idle: 8
        min-idle: 0
#Sa-token相关配置（与官网一致）
sa-token: 
    # token 名称（同时也是 cookie 名称）
    token-name: satoken
    # token 有效期（单位：秒） 默认30天，-1 代表永久有效
    timeout: 2592000
    # token 最低活跃频率（单位：秒），如果 token 超过此时间没有访问系统就会被冻结，默认-1 代表不限制，永不冻结
    active-timeout: -1
    # 是否允许同一账号多地同时登录 （为 true 时允许一起登录, 为 false 时新登录挤掉旧登录）
    is-concurrent: true
    # 在多人登录同一账号时，是否共用一个 token （为 true 时所有登录共用一个 token, 为 false 时每次登录新建一个 token）
    is-share: true
    # token 风格（默认可取值：uuid、simple-uuid、random-32、random-64、random-128、tik）
    token-style: uuid
    # 是否输出操作日志 
    is-log: true

1.2 创建前端工程

本项目使用的vue3，创建一个vue项目，引入下方依赖即可

"dependencies": {
  "axios": "^1.6.8",
  "element-plus": "^2.7.3",
  "pinia": "^2.1.7",
  "qs": "^6.12.1",
  "vue": "^3.2.37",
  "vue-router": "^4.2.5"
},

二、业务代码🎊

后端代码

User.java

@Data
public class User{
    //id
    @TableId(type = IdType.ASSIGN_ID)
    private Long id;
    //用户名
    private String username;
    //密码
    private String password;
    //账户是否锁住(1被锁0未被锁)
    private Integer isLocked;
    //账户是否被删除(1删除0未被删除)
    @TableLogic
    private Integer isDelete;
    //创建时间
    @TableField(fill = FieldFill.INSERT)
    private Date createTime;
    //更新时间
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private Date updateTime;
}

UserDTO.java

@EqualsAndHashCode(callSuper = true)
@Data
public class UserDTO extends User {
    //记住我
    private boolean rememberMe;
    //角色列表
    private List<Role> roleList;
    //登录的设备
    private String device;
    //图形验证码
    private String code;
    //图形验证码的key
    private String codeKey;

}

UserController.java

注意：代码中定义了一些常量，可以自行替代。

@RestController
@RequestMapping("/user")
@CrossOrigin
public class UserController {
    
    @Autowired
    UserService userService;
    @Autowired
    StringRedisTemplate stringRedisTemplate;

    @PostMapping("/doLogin")
    public SaResult doLogin(@RequestBody UserDto userDto) {
        //从redis中取生成的验证码
        String validateCode = stringRedisTemplate.opsForValue().get("code:validate:" + userDto.getCodeKey());
        if (userDto.getCode().equals(validateCode)) {
            //验证码正确才进行用户验证，先验证了用户存不存在，再验证了密码是否正确
            if (userService.login(userDto.getUsername(), userDto.getPassword())) {
                StpUtil.login(userDto.getUsername(), new SaLoginModel()
                         //实现‘记住我’功能
                        .setIsLastingCookie(userDto.isRememberMe())
                         //设置登录设备，主要用于实现同端互斥登录，此处没有实现该功能，可以不用管
                        .setDevice("PC"));
                //验证成功就以json的形式返回token
                HashMap<String, Object> resultMap = new HashMap<>();
                resultMap.put("token", StpUtil.getTokenValue());
                return SaResult
                        .ok(ResponseCode.LOGIN_SUCCESS.getMessage())
                        .setCode(ResponseCode.LOGIN_SUCCESS.getCode())
                        .setData(resultMap);
            } else {
                return SaResult
                        .error(ResponseCode.USERNAME_PASSWORD_ERROR.getMessage())
                        .setCode(ResponseCode.USERNAME_PASSWORD_ERROR.getCode());
            }
        } else {
            return SaResult
                    .error(ResponseCode.VALIDATE_CODE_ERROR.getMessage())
                    .setCode(ResponseCode.VALIDATE_CODE_ERROR.getCode());
        }

    }

}

StpUtils.login：

  1. 检查此账号是否之前已有登录；
  2. 为账号生成 Token 凭证与 Session 会话；
  3. 记录 Token 活跃时间；
  4. 通知全局侦听器，xx 账号登录成功；
  5. 将 Token 注入到请求上下文；
  6. 等等其它工作……

SaResult：这个也是一个由Satoken封装的结果响应类，还是挺好用的。

UserService.java

public interface UserService {
    boolean login(String username, String password);
}

UserServiceImpl.java

@Service
public class UserServiceImpl implements UserService{
    @Autowired
    UserDao userDao;
    
        @Override
    public boolean login(String username, String password) {
        User user = userDao.selectOne(new QueryWrapper<User>().eq("username", username));
        //数据库中的密码进行了加密BCrypt也是Satoken提供的一个工具类
        return user != null && BCrypt.checkpw(password, user.getPassword());
    }
}

UserDao.java

/**
 * (User)表数据库访问层
 *
 * @author yzk
 * @since 2024-05-15 16:44:29
 */
public interface UserDao extends BaseMapper<User> {

}

SaAuthenticationConfigure.java

@Configuration
public class SaAuthenticationConfigure implements WebMvcConfigurer {

    // 注册 Sa-Token 拦截器，打开注解式鉴权功能 
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        // 注册 Sa-Token 拦截器，打开注解式鉴权功能
        registry.addInterceptor(new SaInterceptor(handle -> StpUtil.checkLogin()))
     			//所有接口都会检查是否登录了
                .addPathPatterns("/**")
            	//以下接口不检查，直接放行
                .excludePathPatterns("/user/doLogin")
    }

}

SaTokenFilter.java

@Configuration
public class SaTokenFilter implements WebMvcConfigurer {

    /**
     * 注册 [Sa-Token 全局过滤器] 
     */
    @Bean
    public SaServletFilter getSaServletFilter() {
        return new SaServletFilter()
               
               // 指定 [拦截路由] 与 [放行路由]
               .addInclude("/**").addExclude("/favicon.ico")
               
               // 认证函数: 每次请求执行 
               .setAuth(obj -> {
                SaManager.getLog().debug("----- 请求path={}  提交token={}", SaHolder.getRequest().getRequestPath(), StpUtil.getTokenValue());
                  // ...
               })
               
               // 异常处理函数：每次认证函数发生异常时执行此函数 
               .setError(e -> {
                  return SaResult.error(e.getMessage());
               })
               
               // 前置函数：在每次认证函数之前执行
               .setBeforeAuth(obj -> {
                SaHolder.getResponse()

                  // ---------- 设置跨域响应头 ----------
                  // 允许指定域访问跨域资源
                  .setHeader("Access-Control-Allow-Origin", "*")
                  // 允许所有请求方式
                  .setHeader("Access-Control-Allow-Methods", "*")
                  // 允许的header参数
                  .setHeader("Access-Control-Allow-Headers", "*")
                  // 有效时间
                  .setHeader("Access-Control-Max-Age", "3600")
                  ;
                  
                  // 如果是预检请求，则立即返回到前端 
                  SaRouter.match(SaHttpMethod.OPTIONS)
                     .free(r -> System.out.println("--------OPTIONS预检请求，不做处理"))
                     .back();
               })
               ;
    }

}

注意这个过滤器！！！！！！！！！！务必配置这个过滤器，用SaToken时，后端使用@CrossOrigin进行了跨域的配置，但是！前端发起请求还是会报跨域问题，而且后端会报'未读取到有效token'，是因为前端发起请求时，先发起了预检请求，SaToken拦截了预检请求，预检请求的headers中没有token，所以一直报错。

前端代码

此处删减了部分代码，只保留了登录登录相关的代码

login.vue

<template>
  <div class="login-container">
    <h2>登录</h2>
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label for="username">用户名:</label>
        <el-input type="text" id="username" v-model="user.username" placeholder="请输入用户名" required/>
      </div>
      <div class="form-group">
        <label for="password">密码:</label>
        <el-input type="password" id="password" v-model="user.password" placeholder="请输入密码" required/>
      </div>
      <div class="form-group">
        <label>验证码</label>
        <el-row :gutter="15">
          <el-col :span="14">
            <el-input v-model="user.code" style="margin-top: 7px" class="codeInput"
                      placeholder="请输入验证码"></el-input>
          </el-col>
          <el-col :span="10">
            <el-image @click="changeImage" style="width: 159px; height: 39px" :src="imageUrl"/>
          </el-col>
        </el-row>

      </div>
      <div class="form-group">
        <el-checkbox v-model="user.rememberMe" label="记住我" size="large"/>
      </div>

      <button type="submit">登录</button>
      <button type="submit" @click="toRegister">注册</button>

    </form>
    <div class="social-login">
      <button @click="toGitee">
        <span class="social-icon"></span>使用Gitee登录
      </button>
    </div>
  </div>
</template>

<script setup>
import {h, onMounted, ref} from 'vue';
import {generatorLoginCode, toGiteeOauth, userLogin} from "@/api/userApi";
import {useRouter} from "vue-router";
import {ElCheckbox, ElCol, ElImage, ElInput, ElNotification, ElRow} from "element-plus";

const router = useRouter()
const user = ref({
  username: "",
  password: "",
  rememberMe: false,
  code: "",
  codeKey: ""
})
const handleSubmit = () => {
  userLogin(JSON.stringify(user.value))
      .then((resp) => {
        if (resp.code === 2000) {
          //取出token并存入localStorage
          localStorage.setItem("token", resp.data.token)
          ElNotification({
            title: '提示',
            message: h('info', {style: 'color: teal'}, resp.msg),
            duration: 3000
          })
          router.push("/main")
        } else {
          if (resp.code === 5005) {
            ElNotification({
              title: '提示',
              message: h('error', {style: 'color: red'}, resp.msg),
              duration: 3000
            })
            changeImage()
          }
        }
      })
};
const userLogin = (data) => {
    return requests({
        url: "/user/doLogin",
        data: data,
        method: "POST",
    })
}
</script>

<style scoped>

</style>

前端点击登录按钮时，发后端接口发起请求，请求成功后，取出响应结果中的token存入localStorage。

requests.js

import axios from 'axios';
import {router} from "@/router";

axios.defaults.crossDomain = true

export const requests = axios.create({
    baseURL: 'http://localhost:8081',
    timeout: 10000, // 请求超时时间
    headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*'
    }
});

// 请求拦截器
requests.interceptors.request.use(
    (config) => {
        // 在发送请求之前做些什么
        const token = localStorage.getItem('token'); // 假设token存储在localStorage中
        if (token) {
            config.headers.Token = `Bearer ${token}`; // 添加token到请求头
        }
        return config;
    },
    (error) => {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

// 响应拦截器
requests.interceptors.response.use(
    (response) => {
        console.log(response.data.code)
        const code=response.data.code
        if (code === 5006 ||code===5007|| code===5008) {
            //返回登录界面
            router.push('/').then(r =>{
                location.reload()
            } )
            // router.go(0)
            //删除当前localStorage中的token
            localStorage.removeItem("token")
        }

        return response.data;
    },
    (error) => {
        // 对响应错误做点什么
        return Promise.reject(error);
    }
);

注意请求拦截器，每次发起请求时，都会从localStorage中取出token，并将其放入headers中

三、测试

集成了redis后，记得先开启redis服务，在登录时，框架会自动保存数据

  1. 开启前后端服务

    image-20240523133544450

    本文的代码是从完整项目中抽出的，上述代码只有登录功能

    image-20240523133614619

输入用户名和密码后，进入主界面

image-20240523134210128

此时，登录的信息已经自动的被框架自动保存进redis

image-20240523134056069

IDEA控制台打印出相应的信息

image-20240523134140772

参考资料

Sa-Token

使用 Sa-Token 的全局过滤器解决跨域问题（三种方式全版） - 掘金 (juejin.cn)

Sa-Token功能结构图

笑的像个child
关注
【SaToken使用】springboot+redis+satoken权限认证
m0_67391683的博客
07-28 3000
之前看到satoken（文档），感觉很方便。之前我用shiro+redis+jwt（或者session）遇到的一些问题，用这个感觉都不是问题，很轻易就能解决，比如多端登录可以不用写realm、移动端保持长期登录、token自动刷新、超过系统空闲时间重新登录等。功能还是比较全面的，下面主要是会写一些比较常用的。...
基于Springboot+Vue实现前后端分离商城管理系统
m0_67403076的博客
07-30 2334
新新商城，一款基于Springboot+Vue的电商项目，前后端分离项目。完整的实现了一个商城系统应有的基本功能，包括但不限于以下主要功能模块前端商城用户。
sprintboot Redis配置详解
u010125432的博客
10-21 858
# REDIS (RedisProperties) # Redis数据库索引（默认为0） spring.redis.database=0 # Redis服务器地址 spring.redis.host=localhost # Redis服务器连接端口 spring.redis.port=6379 # Redis服务器连接密码（默认为空） spring.redis.password= # 连接池最大连接数（使用负值表示没有限制） spring.redis.pool.max-active=8 # 连接池最大阻塞等
sa-token应用前后端分离做登录认证
qq_41126680的博客
08-10 169
System.out.println("---------- 进入Sa-Token全局认证 -----------");System.out.println("---------- 进入Sa-Token异常处理 -----------");// 登录认证 -- 拦截所有路由，并排除/user/doLogin 用于开放登录。// ---------- 设置跨域响应头 ----------// ---------- 设置一些安全响应头 ----------message = "账号已过期，请重新登录";
SpringBoot+Vue+JWT的前后端分离登录认证
wenqi
09-23 755
前后端分离的概念在现在很火，最近也学习了一下前后端分离的登录认证。 创建后端springboot工程 这个很简单了，按照idea的一步一步创建就行 文件目录结构： pom文件依赖导入。 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-st
spring boot前后端分离，jwt+vue实现登录验证
qq_55648724的博客
11-23 1430
登录分离
SpringBoot项目模板搭建（前后端分离）包含自定义登录认证
严泽熠的博客
01-19 837
SpringBoot项目模板搭建，前后端分离项目中后端模板，包含自定义登录验证等一系列常用功能
基于SpringBoot+Vue+sa-token前后端分离的科研项目管理平台源代码
06-16
基于SpringBoot+Vue+sa-token前后端分离的科研项目管理平台 前端采用Vue、Element UI 后端采用Spring Boot、Redis & Jwt。 Sa-Token：一个轻量级 java 权限认证框架，让鉴权变得简单、优雅！ 权限认证使用Jwt，支持...
yshopmall:yshop基于当前流行技术组合的前后端分离商城系统： SpringBoot2+MybatisPlus+SpringSecurity+jwt+redis+Vue的前后端分离的商城系统， 包含商城、小程序直播、拼团、砍价、商户管理、 秒杀、优惠券、积分、分销、会员、充值、多门店等功能
05-01
yshop意象商城系统 ...yshop基于当前流行技术组合的前后端分离商城系统： SpringBoot2+MybatisPlus+SpringSecurity+jwt+redis+Vue的前后端分离的商城系统， 包含商城、小程序直播、拼团、砍价、商户管理、 秒杀
高颜值+前后端分离+代码生成器+开源，这款SpringBoot开发框架，真爽
平凡的树叶，记录我程序生涯的成长
04-07 2099
高颜值+前后端分离+代码生成器+开源，这款SpringBoot开发框架，真爽Sa-plus简介项目技术栈后端代码介绍1、各包说明2、详细说明前端代码介绍接口文档代码介绍快速开始1、创建数据库2、 导入服务端代码3、导入后台管理4、 导入接口文档5、导入代码生成器导入代码生成器总结项目地址 俗话说工欲善其事，必先利其器！想做项目(接私活)，如果从零开始搭建是一件令人很头痛的事情。今天发现一款高颜值+前后端分离+代码生成器+开源的基于SpringBoot快速开发神器（Sa-plus）！内置代码生成器，框架集成J
基于springBoot+springSecurity+jwt实现前后端分离用户权限认证
12-09
主要基于前后端分离情况下用户权限认证, 当用户登录认证成功后，每个用户会获取到自己的token，在请求其他接口时只需携带token即可,后端会通过token来识别用户身份。springSecurity也有很多种权限认证方式，本项目主要实现基于接口授权，也就是说通过注解给controller赋予权限，用户只有拥有某个接口的权限才能成功访问这个接口，从而实现不同用户拥有不同访问权限;
springboot整合Sa-Token 实现前后端分离登录注销功能，刚学习Sa-Token，用来练手，适合初学者。仅作学习使用
05-22
springboot整合Sa-Token 实现前后端分离登录注销功能，刚学习Sa-Token，用来练手，适合初学者。仅作学习使用 前端使用html jquery ajax异步请求 后端springboot框架，Sa-Token框架。 jdk使用1.8 mysql 8.0
SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题
10-12
转载他人 https://blog.csdn.net/u012702547/article/details/79010010 https://blog.csdn.net/u012702547/article/details/79019510
Spring boot+Spring security+JWT实现前后端分离登录认证及权限控制
sebeefe的博客
06-12 888
借鉴文章：Springboot + Spring Security 实现前后端分离登录认证及权限控制_I_am_Rick_Hu的博客-CSDN博客_springsecurity前后端分离登录认证最近一段时间，公司给我安排了一个公司子系统的后台管理系统，让我实现权限管理。此时我就考虑到Spring全家桶的Spring security来权限管理。Spring security大致分为认证和授权两个功能，底层也是通过JavaWeb的Filter过滤器来实现，在Spring security中维护了一个过滤器链用
springboot前后端分离集成CAS单点登录(统一认证)
y206168686的博客
04-09 2011
springboot集成cas统一认证，单点登录
前后台分离登录认证
最新发布
Supreme13的博客
07-28 976
思路分析自定义登录接口调用ProviderManager的authenticate()方法进行认证,如果认证通过,则生成JWT把用户信息存入redis中自定义UserDetailsService接口实现类我们在这个实现类查询数据库定义JWT认证过滤器获取token解析token获取其中的uuid从redis中获取用户信息存入SecurityContextHolder。
将SpringBoot+SpringSecurity改造为前后端分离+Jwt的权限认证系统，Token过期刷新问题
热门推荐
zzzgd_666的博客
07-18 1万+
前言 一般来说，我们用SpringSecurity默认的话是前后端整在一起的，比如thymeleaf或者Freemarker，SpringSecurity还自带login登录页,还让你配置登出页,错误页。 但是现在前后端分离才是正道，前后端分离的话，那就需要将返回的页面换成Json格式交给前端处理了 SpringSecurity默认的是采用Session来判断请求的用户是否登录的，但是不方便分布式...
前后端分离，使用vue3整合SpringSecurity加JWT实现登录认证
2301_78646673的博客
01-22 4544
前段时间写了一篇spring security的详细入门，但是没有联系实际。所以这次在真实的项目中来演示一下怎样使用springsecurity来实现我们最常用的登录校验。本次演示使用现在市面上最常见的开发方式，前后端分离开发。前端使用vue3进行构建，用到了element-plus组件库、axios封装、pinia状态管理、Router路由跳转等技术。后端还是spring boot整合springsecurity+JWT来实现登录校验。
前后端分离项目springsecurity实现用户登录认证快速使用
m0_71751187的博客
03-20 1835
ps：该文章适合未系统学习springsecurity快速使用，可以直接cv使用，只有部分源码讲解，个人觉得先会用了再深究原理。
权限管理系统rbac-基于springboot+vue+redis 前后端分离模式
01-17
权限管理系统是一种用于管理用户权限和角色的系统，可以根据用户的身份和角色来控制其访问系统中的各种资源。基于SpringBoot，Vue和Redis的前后端分离模式，可以更好地实现权限管理系统的功能。 在这个系统中，SpringBoot作为后端框架，提供了强大的功能和稳定的性能，可以处理用户的请求并进行权限验证。Vue作为前端框架，提供了友好的界面和良好的用户体验，可以让用户方便地进行权限管理操作。而Redis作为缓存数据库，可以用来存储权限信息和用户的登录状态，加快系统的响应速度和提高系统的性能。 在权限管理系统中，我们可以使用RBAC（基于角色的权限控制）模型，将用户分配到不同的角色，再将角色分配到不同的权限，从而实现对用户访问资源的控制。通过这种方式，可以实现灵活的权限管理，并且可以根据实际需求动态地调整用户的权限和角色。 通过使用SpringBoot和Vue，我们可以实现前后端分离，让前端和后端分别进行开发和维护，降低了系统的耦合度，同时也增加了系统的灵活性和可维护性。而通过使用Redis，我们可以充分利用其高速的读取和写入能力，有效地提升系统的性能和响应速度。 综上所述，基于SpringBoot、Vue和Redis的权限管理系统，可以实现灵活、高效和安全的权限管理功能，满足用户对于权限管理的各种需求。同时，前后端分离模式也使得系统更加灵活和易于维护。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

笑的像个child

好人一生平安，先磕为敬

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值