若依Vue集成SaToken登录后权限校验失效

Question

在若依Vue前端框架集成SaToken实现登录认证后，常出现权限校验失效问题：用户登录后菜单正常显示，但接口访问时后端返回“无权限”错误。排查发现，SaToken虽成功生成token并写入响应头，但前端未统一携带token请求头（如Authorization），导致后续接口无法通过@SaCheckRole或@SaCheckPermission注解鉴权。问题根源多为axios拦截器未正确配置，或若依原有SecurityUtils工具类与SaToken上下文冲突，造成权限上下文获取失败。

Answer 1

1. 问题现象与初步定位

在若依（RuoYi）Vue前端框架中集成SaToken实现登录认证后，用户可正常完成登录流程，系统菜单也根据角色权限正确渲染。然而，在调用受@SaCheckRole或@SaCheckPermission注解保护的后端接口时，频繁出现“无权限”错误。

通过浏览器开发者工具抓包分析发现：登录请求成功返回了SaToken生成的token，并写入响应头Authorization字段；但后续所有业务接口请求均未携带该请求头，导致服务端无法识别当前会话身份，鉴权失败。

此问题具有典型性，常见于从传统Spring Security迁移至SaToken的项目中，尤其是在保留原有前端逻辑结构的情况下。

2. 核心排查路径梳理

1. 确认SaToken是否正确生成并返回token
2. 检查前端是否接收到token并持久化存储（如localStorage）
3. 验证axios拦截器是否配置请求头自动附加token
4. 排查若依原有SecurityUtils工具类对上下文的影响
5. 分析SaToken上下文线程绑定机制是否被破坏
6. 查看网关或代理层是否存在header过滤行为

3. 前端axios拦截器配置缺失分析

若依默认使用axios进行HTTP通信，若未在utils/request.js中设置响应拦截器保存token、请求拦截器添加Authorization头，则会导致token丢失。

// 示例：正确的axios拦截器配置
import axios from 'axios';
import store from '@/store';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
});

// 响应拦截器 - 拦截登录返回的token
service.interceptors.response.use(
  response => {
    const { config, headers } = response;
    const token = headers['authorization']; // SaToken默认返回字段
    if (token && config.url === '/login') {
      localStorage.setItem('satoken', token);
    }
    return response;
  },
  error => {
    return Promise.reject(error);
  }
);

// 请求拦截器 - 统一携带token
service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('satoken');
    if (token) {
      config.headers['Authorization'] = token;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);
    

4. 若依原有SecurityUtils与SaToken上下文冲突

若依后端常依赖SecurityUtils.getSubject()获取当前用户信息，其底层基于Shiro或Spring Security的ThreadLocal上下文模型。而SaToken使用StpUtil.getLoginId()访问StpLogic中的会话上下文。

当两者共存且未做桥接处理时，可能出现：

• SecurityUtils试图从已废弃的安全上下文中取值
• SaToken虽已登录，但其他组件仍调用旧工具类导致空指针
• 权限校验绕过SaToken机制，直接查询数据库角色表，造成状态不一致

5. SaToken配置与注解生效条件对照表

配置项	作用	常见错误
tokenName	请求头或参数中的token名称	前端发送satoken但后端配置为Authorization
isConcurrent	是否允许多设备登录	设为false导致旧token失效
maxLoginCount	最大登录数限制	超出后强制踢出，引发鉴权中断
isReadCookie	是否从Cookie读取token	关闭时需前端显式传参
jwtTimeout	JWT模式下token有效期	过期未刷新导致鉴权失败

6. 完整解决方案流程图

graph TD
    A[用户登录] --> B{后端生成SaToken}
    B --> C[写入响应头Authorization]
    C --> D[前端拦截响应]
    D --> E[存储token至localStorage]
    E --> F[配置axios请求拦截器]
    F --> G[每次请求携带Authorization头]
    G --> H[后端SaToken解析token]
    H --> I[通过@SaCheckRole鉴权]
    I --> J[成功返回数据]
    D -.-> K[若未设置拦截器则G失败]
    H -.-> L[上下文获取失败]
    L --> M[返回无权限]
    style K stroke:#f66,stroke-width:2px
    style L stroke:#f66,stroke-width:2px
    

7. 后端SaToken配置建议

确保application.yml中SaToken配置与前端行为一致：

sa-token:
  # token名称 (客户端请求头名称)
  token-name: Authorization
  # token有效期 默认30天
  timeout: 2592000
  # 是否允许同一账号并发登录 (多端登录)
  is-concurrent: true
  # 在多人登录同一账号时 是否共用一个token
  is-share: false
  # token风格
  token-style: uuid
    

同时禁用原若依的Shiro/Spring Security自动配置，避免Bean冲突。

8. 上下文桥接方案设计

为兼容遗留代码中的SecurityUtils调用，可创建适配层：

@Component
public class SaTokenSecurityAdapter {

    public static LoginUser getSubject() {
        if (!StpUtil.isLogin()) {
            throw new NotLoginException("用户未登录", -1, "");
        }
        Object loginId = StpUtil.getLoginId();
        // 从Redis或Db加载完整用户信息
        return userService.selectLoginUserByUserId(Long.valueOf(loginId.toString()));
    }
}
    

将原SecurityUtils.getSubject()替换为该适配器调用，实现平滑过渡。

9. 测试验证步骤清单

1. 登录后检查浏览器Storage中是否存在satoken
2. 发起任意业务请求，使用DevTools查看Request Headers是否包含Authorization
3. 断点调试Controller入口处StpUtil.isLogin()返回值
4. 验证@SaCheckPermission("sys:user:list")是否触发异常
5. 日志输出StpUtil.getLoginId()结果是否符合预期
6. 模拟token过期场景，测试刷新机制
7. 多标签页操作验证并发登录控制
8. 清除本地存储后确认跳转登录页逻辑
9. 压力测试长时间会话保持能力
10. 审计第三方库是否有header篡改行为

10. 高级优化建议

对于大型系统，建议引入以下增强机制：

• Token自动刷新：利用SaToken的autoRenew功能延长有效时间
• 前端Token监听机制：通过Vuex或Pinia全局管理token状态变化
• 微前端场景下的共享存储策略：使用iframe + postMessage同步token
• 灰度发布支持：双token并行阶段，逐步切换鉴权体系
• 安全加固：结合CSP、SameSite Cookie策略防止XSS攻击