当前位置： 首页 > news >正文

fastapi+vue中的用户权限管理设计

news 2025/5/6 16:01:20

数据库设计：RBAC数据模型

这是一个典型的基于SQLAlchemy的RBAC权限系统数据模型实现，各模型分工明确，共同构成完整的权限管理系统。

图解说明：

  1. 实体关系：

    • 用户(USER)和角色(ROLE)通过 USER_ROLE 中间表实现多对多关系

    • 角色(ROLE)和权限(PERMISSION)通过 ROLE_PERMISSION 中间表实现多对多关系

  2. 关键连接点：

    USER → USER_ROLE ← ROLE → ROLE_PERMISSION ← PERMISSION

    这个链条完整表达了"用户→角色→权限"的授权路径

  3. 箭头含义：

    • ||--o{ 表示一对多关系

    • PK 表示主键

    • FK 表示外键

  4. 实际业务流：
    当检查用户是否有某接口的访问权限时，系统会：

    用户ID → 查询USER_ROLE → 获取角色列表 → 
查询ROLE_PERMISSION → 获取权限列表 → 
匹配权限中的resource字段与当前请求接口

这个图示清晰地展示了您提供的四个模型如何协作完成RBAC权限控制。如果需要更详细的流程图或时序图，我可以进一步补充。

1. Role (角色模型)

  • 核心作用：定义系统中的角色实体

  • 关键字段：

    • role_name: 角色唯一标识（如admin/hr/interviewer）

    • description: 角色描述信息

  • 关联关系：

    • users: 通过UserRole关联到用户（一对多）

    • permissions: 通过RolePermission关联到权限（一对多）

  • 业务意义：角色是权限分配的中间层，用户通过角色间接获得权限

2. Permission (权限模型)

  • 核心作用：定义系统中的具体权限项

  • 关键字段：

    • permission_name: 权限唯一标识（如knowledge_create）

    • resource: 关联的资源路径/API端点

  • 关联关系：

    • roles: 通过RolePermission关联到角色（一对多）

  • 业务意义：权限是系统中最细粒度的访问控制单元，直接对应具体操作

3. UserRole (用户-角色关联模型)

  • 核心作用：维护用户与角色的多对多关系

  • 关键设计：

    • 联合唯一约束(uq_user_role): 防止重复分配相同角色

    • 级联删除: 用户删除时自动解除关联

  • 关联关系：

    • user: 关联到用户表

    • role: 关联到角色表

  • 业务意义：实现"用户拥有哪些角色"的映射关系

4. RolePermission (角色-权限关联模型)

  • 核心作用：维护角色与权限的多对多关系

  • 关键设计：

    • 联合唯一约束(uq_role_permission): 防止重复分配相同权限

    • 级联删除: 角色删除时自动解除关联

  • 关联关系：

    • role: 关联到角色表

    • permission: 关联到权限表

  • 业务意义：实现"角色包含哪些权限"的映射关系

整体协作流程

  1. 管理员创建权限(Permission)并定义其对应的资源

  2. 创建角色(Role)并将相关权限关联到角色(RolePermission)

  3. 为用户分配角色(UserRole)

  4. 系统通过检查用户的角色→权限→资源路径链来确定访问权限

这种设计实现了权限管理的解耦，使系统能够灵活应对权限变更，同时通过中间表实现了多对多关系的维护。

class User(Base):__tablename__ = 'user'__table_args__ = {'extend_existing': True}user_id = Column(Integer, primary_key=True, autoincrement=True, comment='Primary Key')user_name = Column(String(100), nullable=False)password = Column(String(200), nullable=False)user_email = Column(String(100), nullable=False, unique=True)user_department = Column(String(100), nullable=True)join_time = Column(DateTime, nullable=False, default=datetime.now)# 关联 Session 模型，代表该用户的所有会话sessions = relationship("Session", back_populates="user", cascade="all, delete-orphan")# 关联 Knowledge 模型，代表该用户关联的所有知识knowledge = relationship("Knowledge", back_populates="user", cascade="all, delete-orphan")# 添加与UserRole的关系roles = relationship("UserRole", back_populates="user", cascade="all, delete-orphan")class Role(Base):__tablename__ = 'role'__table_args__ = {'extend_existing': True}role_id = Column(Integer, primary_key=True, autoincrement=True, comment='Primary Key')role_name = Column(String(50), nullable=False, unique=True, comment='角色名称，如admin/hr/interviewer')description = Column(String(200), comment='角色描述')create_time = Column(DateTime, nullable=False, default=datetime.now)modify_time = Column(DateTime, nullable=False, default=datetime.now, onupdate=datetime.now)# 关联到UserRole和RolePermissionusers = relationship("UserRole", back_populates="role", cascade="all, delete-orphan")permissions = relationship("RolePermission", back_populates="role", cascade="all, delete-orphan")class Permission(Base):__tablename__ = 'permission'__table_args__ = {'extend_existing': True}permission_id = Column(Integer, primary_key=True, autoincrement=True, comment='Primary Key')permission_name = Column(String(100), nullable=False, unique=True, comment='权限名称，如knowledge_create/session_delete')description = Column(String(200), comment='权限描述')resource = Column(String(200), comment='对应的资源路径/API端点')create_time = Column(DateTime, nullable=False, default=datetime.now)modify_time = Column(DateTime, nullable=False, default=datetime.now, onupdate=datetime.now)# 关联到RolePermissionroles = relationship("RolePermission", back_populates="permission", cascade="all, delete-orphan")class UserRole(Base):__tablename__ = 'user_role'__table_args__ = (UniqueConstraint('user_id', 'role_id', name='uq_user_role'),{'extend_existing': True})id = Column(Integer, primary_key=True, autoincrement=True)user_id = Column(Integer, ForeignKey('user.user_id', ondelete='CASCADE'), nullable=False)role_id = Column(Integer, ForeignKey('role.role_id', ondelete='CASCADE'), nullable=False)create_time = Column(DateTime, nullable=False, default=datetime.now)# 关联到User和Roleuser = relationship("User", back_populates="roles")role = relationship("Role", back_populates="users")class RolePermission(Base):__tablename__ = 'role_permission'__table_args__ = (UniqueConstraint('role_id', 'permission_id', name='uq_role_permission'),{'extend_existing': True})id = Column(Integer, primary_key=True, autoincrement=True)role_id = Column(Integer, ForeignKey('role.role_id', ondelete='CASCADE'), nullable=False)permission_id = Column(Integer, ForeignKey('permission.permission_id', ondelete='CASCADE'), nullable=False)create_time = Column(DateTime, nullable=False, default=datetime.now)# 关联到Role和Permissionrole = relationship("Role", back_populates="permissions")permission = relationship("Permission", back_populates="roles")

后端技术实现流程：

JWT (JSON Web Token)

  • 一种紧凑的、URL安全的令牌格式

  • 包含三部分：Header(头部)、Payload(负载)和Signature(签名)

  • 用于在各方之间安全地传输信息

OAuth 2.0

  • 一个授权框架，允许第三方应用获取对资源的有限访问权限

  • 定义了四种授权流程(授权码、隐式、密码、客户端凭证)

典型 JWT + OAuth 2.0 流程 (授权码模式)

  1. 用户发起授权请求

    • 客户端将用户重定向到授权服务器

    • 携带参数：response_type=code, client_id, redirect_uri, scope等

  2. 用户认证与同意

    • 用户在授权服务器登录并同意请求的权限

  3. 获取授权码

    • 授权服务器返回授权码到客户端的redirect_uri

  4. 用授权码交换令牌

    • 客户端向授权服务器的令牌端点发送请求

    • 携带：grant_type=authorization_code, code, redirect_uri, client_id, client_secret

  5. 返回JWT令牌

    • 授权服务器验证后返回访问令牌(通常是JWT)和刷新令牌

    • 响应示例：

      {"access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...","token_type": "Bearer","expires_in": 3600,"refresh_token": "def50200ae2f..."
}

  6. 使用访问令牌访问资源

    • 客户端在请求头中加入：Authorization: Bearer <access_token>

    • 资源服务器验证JWT签名和声明

  7. 刷新令牌(可选)

    • 当访问令牌过期时，使用刷新令牌获取新的访问令牌

JWT在OAuth中的优势

  1. 自包含：JWT包含所有必要信息，减少数据库查询

  2. 可验证性：资源服务器可以独立验证JWT而不需联系授权服务器

  3. 标准化结构：易于跨语言和平台实现

# app/middlewares/permission.py
from fastapi import Request, HTTPException, Depends
from sqlalchemy.orm import Session
from app.db_init import SessionLocal
from app.models.model import User, Permission, RolePermission, UserRole, Role  # 添加 Role 导入
from functools import wrapsdef permission_required(permission_name: str):"""权限检查依赖工厂函数"""async def dependency(request: Request):db: Session = SessionLocal()try:user_id = getattr(request.state, 'user_id', None)if not user_id:raise HTTPException(status_code=401, detail="未认证")# 检查是否是管理员/root用户user = db.query(User).filter(User.user_id == user_id).first()if not user:raise HTTPException(status_code=401, detail="用户不存在")# 检查用户角色admin_role = (db.query(UserRole).join(Role, Role.role_id == UserRole.role_id).filter(UserRole.user_id == user_id).filter(Role.role_name == 'admin').first())if admin_role:return  # 管理员直接通过权限检查# 普通用户权限检查has_permission = db.query(Permission).join(RolePermission, RolePermission.permission_id == Permission.permission_id).join(UserRole, UserRole.role_id == RolePermission.role_id).filter(UserRole.user_id == user_id,Permission.permission_name == permission_name).first()if not has_permission:raise HTTPException(status_code=403, detail="权限不足")finally:db.close()return Depends(dependency)

permission_required 函数是一个 FastAPI 的权限检查依赖工厂函数，主要用于实现基于权限的访问控制。它的主要作用和功能如下：

  1. 功能概述：

    • 它是一个装饰器工厂函数，接收一个权限名称作为参数，返回一个 FastAPI 依赖项

    • 用于检查当前请求的用户是否拥有指定的权限

  2. 工作流程：

    • 从请求中获取用户 ID

    • 查询数据库验证用户是否存在

    • 检查用户是否是管理员角色（role_name 为 'admin'），如果是则直接通过检查

    • 对于非管理员用户，检查用户是否拥有指定的权限

    • 如果没有权限则返回 403 错误

  3. 权限检查逻辑：

    • 通过连接查询检查用户角色关联的权限

    • 查询涉及多个表：User → UserRole → RolePermission → Permission

    • 只有当用户至少有一个角色拥有指定的权限时才会通过检查

  4. 异常处理：

    • 未认证用户（无 user_id）：返回 401

    • 用户不存在：返回 401

    • 权限不足：返回 403

什么是中间件？

在 Web 开发中，中间件（Middleware） 是一种机制，用于在 HTTP 请求到达路由处理函数之前 或 响应返回客户端之前 执行某些逻辑。它类似于一个“拦截器”，可以对请求和响应进行预处理或后处理。

中间件的作用

  1. 全局处理请求/响应

    • 例如：身份验证、日志记录、跨域处理（CORS）、请求限流、数据压缩等。

  2. 修改请求或响应

    • 例如：添加请求头、解析请求体、修改响应数据。

  3. 拦截非法请求

    • 例如：检查权限（如你的 permission_required）、阻止未授权的访问。

中间件的工作原理

在 FastAPI 或类似的框架（如 Express.js、Django）中，中间件通常按照 洋葱模型（Onion Model） 工作：

请求 → 中间件1 → 中间件2 → ... → 路由处理 → ... → 中间件2 → 中间件1 → 响应

  • 请求阶段：中间件按顺序执行（如先验证身份，再检查权限）。

  • 响应阶段：中间件按相反顺序执行（如先记录日志，再返回数据）。

FastAPI 中的中间件示例

1. 普通中间件（全局拦截）
from fastapi import FastAPI, Requestapp = FastAPI()@app.middleware("http")
async def log_requests(request: Request, call_next):print(f"收到请求: {request.method} {request.url}")response = await call_next(request)  # 继续执行后续中间件或路由print(f"返回响应: {response.status_code}")return response

  • 这个中间件会在 每个请求前后 打印日志。

2. 依赖注入式中间件（如你的 permission_required）
from fastapi import Depends, HTTPExceptiondef check_auth(token: str):if token != "secret":raise HTTPException(status_code=403, detail="无权访问")return True@app.get("/admin")
async def admin_route(auth: bool = Depends(check_auth)):return {"message": "欢迎管理员"}

  • Depends(check_auth) 是一个依赖项，作用类似于中间件，但更灵活（可以针对单个路由使用）。

中间件 vs 依赖注入

特性中间件依赖注入（如 Depends）
作用范围全局或路由组单个路由
执行顺序所有请求必经仅对声明了的路由生效
典型用途日志、CORS、全局认证细粒度权限检查、数据库会话管理

你的 permission_required 是中间件吗？

严格来说，它 不是传统中间件，而是一个 依赖项工厂函数（返回 Depends）。但它实现了类似中间件的功能（权限检查），只是作用范围更精确（仅对使用它的路由生效）。

总结

  • 中间件：适合全局逻辑（如日志、CORS）。

  • 依赖注入：适合路由级逻辑（如权限、数据库会话）。

  • 你的 permission_required 是依赖注入的典型应用，用于实现 RBAC（基于角色的访问控制）。

@router.post('/login')
async def login(request_data: LoginRequest, db = Depends(get_db)):'''登录界面'''username = request_data.usernamepassword = request_data.password# 根据用户名查询数据库中用户的密码info = AuthService.select_user_info(username, db)if info is None:return {'code': 401,'message': 'user not found'}# 密码验证if password != info['password']:return {'code': 401,'message': 'password error'}# 获取用户角色user_roles = AuthService.get_user_roles(info['user_id'], db)is_admin = 'admin' in [role.lower() for role in user_roles]# 获取用户权限permissions = AuthService.get_user_permissions(info['user_id'], db)if permissions is None:permissions = []# 创建JWT令牌access_token_expires = timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)access_token = create_access_token(data={"sub": str(info['user_id']),  # 确保user_id是字符串"username": info['user_name'],"permissions": permissions,"is_admin": is_admin,"roles": user_roles},expires_delta=access_token_expires)return {'code': 200,'message': 'success','data': {'user_id': info['user_id'],'username': info['user_name'],'access_token': access_token,'token_type': 'bearer','permissions': permissions,'roles': user_roles,'is_admin': is_admin}}

这个 login 函数是一个 FastAPI 路由处理函数，用于实现用户登录认证流程。它的核心作用是：

主要功能

  1. 用户身份认证

    • 接收前端提交的用户名和密码（通过 LoginRequest 模型）。

    • 验证用户名是否存在、密码是否正确。

    • 返回 401 错误码和提示信息（如 "user not found" 或 "password error"）。

  2. 权限和角色信息收集

    • 查询用户的角色（如 user_roles）并检查是否是管理员（is_admin）。

    • 查询用户拥有的权限列表（permissions）。

  3. 生成 JWT 令牌

    • 使用 create_access_token 生成包含用户信息的 JWT（有效期通过 ACCESS_TOKEN_EXPIRE_MINUTES 控制）。

    • 令牌中存储的关键数据：

      {"sub": "用户ID",          # 用户唯一标识"username": "用户名","permissions": ["权限1", "权限2"],  # 用户权限列表"is_admin": True/False,   # 是否是管理员"roles": ["角色1", "角色2"]       # 用户角色列表
}

  4. 返回登录结果

    • 返回 200 状态码和用户信息（包括令牌、权限、角色等），供前端后续使用。

详细流程

  1. 参数接收

    • 通过 LoginRequest 模型（未展示但应包含 username 和 password 字段）接收前端提交的登录数据。

  2. 用户验证

    • 调用 AuthService.select_user_info 查询数据库，检查用户名是否存在。

    • 比对数据库中的密码（明文比对，实际项目中应使用 哈希密码比对，如 bcrypt）。

  3. 权限角色查询

    • 通过 AuthService.get_user_roles 获取用户角色列表，并检查是否包含 admin 角色。

    • 通过 AuthService.get_user_permissions 获取用户权限列表（用于前端动态路由或按钮权限控制）。

  4. 令牌生成

    • 使用 create_access_token（可能是 fastapi-jwt 或类似库）生成 JWT，包含用户关键信息。

  5. 响应返回

    • 返回结构化响应，包含令牌和用户信息，例如：

      {"code": 200,"message": "success","data": {"user_id": 123,"username": "john","access_token": "xxx.yyy.zzz","permissions": ["read", "write"],"roles": ["user"],"is_admin": false}
}

关键点说明

  1. 安全注意事项

    • 密码明文存储问题：当前代码直接比对明文密码，实际项目应使用 密码哈希（如 bcrypt）存储和验证。

    • JWT 敏感信息：令牌中存储了 permissions 和 roles，需确保 JWT 使用 HTTPS 传输并设置合理有效期。

  2. 权限控制设计

    • 前端可根据返回的 permissions 和 roles 动态渲染界面。

    • 后端可通过 permission_required 中间件（如你之前提供的）进一步校验权限。

  3. 扩展性

    • 可添加登录日志记录、多设备登录限制、验证码等功能。

典型使用场景

  1. 前端提交登录表单 → 后端验证 → 返回令牌。

  2. 前端将令牌存储在 localStorage 或 Cookie 中，后续请求通过 Authorization: Bearer <token> 头部携带。

  3. 其他受保护的路由通过中间件校验令牌和权限（如 @router.get("/admin", dependencies=[Depends(permission_required("admin_access"))]）。

这个函数是典型的认证系统核心部分，实现了从登录到权限令牌分发的完整流程。

from fastapi import Depends, HTTPException, status
from fastapi.security import OAuth2PasswordBearer
from jose import JWTError, jwt
from datetime import datetime, timedelta
from utils.configs import SECRET_KEY, ALGORITHM, ACCESS_TOKEN_EXPIRE_MINUTES
from fastapi import Request# OAuth2 配置
oauth2_scheme = OAuth2PasswordBearer(tokenUrl="token")# 创建访问令牌
def create_access_token(data: dict, expires_delta: timedelta = None):to_encode = data.copy()if expires_delta:expire = datetime.utcnow() + expires_deltaelse:expire = datetime.utcnow() + timedelta(minutes=15)to_encode.update({"exp": expire})encoded_jwt = jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)return encoded_jwtasync def get_current_user(token: str = Depends(oauth2_scheme)):credentials_exception = HTTPException(status_code=status.HTTP_401_UNAUTHORIZED,detail="Could not validate credentials",headers={"WWW-Authenticate": "Bearer"},)try:payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])user_id = payload.get("sub")if user_id is None:raise credentials_exceptionpermissions = payload.get("permissions", [])username = payload.get("username")is_admin = payload.get("is_admin", False)roles = payload.get("roles", [])# 返回一个包含所需信息的字典return {"user_id": user_id,"username": username,"permissions": permissions,"is_admin": is_admin,"roles": roles}except JWTError:raise credentials_exceptionasync def auth_middleware(request: Request, call_next):try:token = request.headers.get('Authorization')if token and token.startswith('Bearer '):token = token.split(' ')[1]payload = jwt.decode(token, SECRET_KEY, algorithms=[ALGORITHM])request.state.user_id = payload.get("sub")request.state.permissions = payload.get("permissions", [])except JWTError:passresponse = await call_next(request)return response

这几个函数共同构成了一个 FastAPI 的 JWT 认证系统，分别负责 令牌生成、用户认证和请求拦截。以下是它们的详细作用：

1. create_access_token - JWT 令牌生成

作用：
生成一个包含用户信息的 JWT（JSON Web Token），用于身份验证和授权。

关键逻辑：

  • 接收一个字典 data（包含用户信息如 user_id、permissions 等）。

  • 设置令牌过期时间（默认 15 分钟，或通过 expires_delta 自定义）。

  • 使用 SECRET_KEY 和 ALGORITHM（如 HS256）签名令牌。

示例输出：

token = create_access_token({"sub": "123", "username": "john"})
# 类似：eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjMiLCJleHAiOjE2...

2. get_current_user - 当前用户认证

作用：
解析请求中的 JWT 令牌，验证用户身份并返回用户信息。

关键逻辑：

  • 通过 OAuth2PasswordBearer 自动从请求头 Authorization: Bearer <token> 提取令牌。

  • 解码令牌并验证签名（使用 SECRET_KEY）。

  • 提取关键字段（如 user_id、permissions、is_admin）。

  • 如果令牌无效或过期，抛出 401 Unauthorized 错误。

典型用法：

@app.get("/protected")
async def protected_route(user: dict = Depends(get_current_user)):return {"user": user}

3. auth_middleware - 认证中间件

作用：
拦截所有请求，解析 JWT 令牌并将用户信息注入到 request.state 中，供后续路由或中间件使用。

关键逻辑：

  • 从请求头提取 Bearer 令牌。

  • 解码令牌并提取 user_id 和 permissions，存入 request.state。

  • 如果令牌无效，静默跳过（不中断请求，适合非强制校验的场景）。

与 get_current_user 的区别：

特性auth_middlewareget_current_user
作用范围全局（所有请求）单个路由（需显式声明 Depends）
认证严格性静默失败（仅注入数据）严格失败（401 错误）
典型用途日志、基础用户信息注入需要强认证的路由

协作流程

  1. 用户登录

    • 调用 create_access_token 生成令牌并返回给前端。

  2. 前端请求

    • 在请求头中添加 Authorization: Bearer <token>。

  3. 请求处理

    • auth_middleware 拦截请求，解析令牌并注入用户信息到 request.state。

    • 路由层可通过 get_current_user 进一步严格校验（如需要权限的接口）。

安全注意事项

  1. 密钥管理

    • SECRET_KEY 必须保密，且不要硬编码在代码中（从环境变量读取）。

  2. 令牌有效期

    • 生产环境中 ACCESS_TOKEN_EXPIRE_MINUTES 不宜过长（通常 15-60 分钟）。

  3. 算法选择

    • 推荐使用 HS256（对称加密）或 RS256（非对称加密）。

  4. 中间件静默失败

    • auth_middleware 不强制拦截无效令牌，需确保关键路由额外依赖 get_current_user。

扩展建议

  • 刷新令牌：添加 refresh_token 机制实现无感续期。

  • 权限校验：结合 permission_required（你之前的代码）实现细粒度控制。

  • 日志记录：在中间件中记录用户操作日志。

这些函数共同构建了一个完整的 JWT 认证体系，覆盖了从令牌生成到请求处理的完整链路。

然后将这个认证中间件添加到接收HTTP请求之前

然后在路由中添加权限名称

在 FastAPI 中，_=permission_required("abilities_read") 是一种 依赖注入（Dependency Injection） 的用法，用于在路由处理函数执行前进行 权限校验。以下是详细解释：

1. 代码含义

  • permission_required("abilities_read")
    这是一个依赖项工厂函数（你之前定义的），它会检查当前用户是否拥有 abilities_read 权限。

  • _=
    将依赖项的返回值赋值给变量 _（下划线是 Python 中约定用于“忽略此变量”的命名方式），表示我们不需要在函数体内使用这个返回值。

2. 执行流程

  1. 请求到达路由
    当客户端访问 GET /api/abilities 时，FastAPI 会先执行 permission_required("abilities_read") 的校验逻辑。

  2. 权限校验

    • 如果用户 有权限：继续执行 get_abilities 函数体。

    • 如果用户 无权限：直接返回 403 Forbidden 错误（由 permission_required 抛出）。

  3. 处理业务逻辑
    只有通过权限校验后，才会调用 get_all_competency_items() 获取数据并返回。

3. 为什么用 _=？

  • 明确忽略返回值：
    permission_required 可能返回某些值（如用户信息），但当前路由不需要使用它，用 _ 表示“故意忽略”。

  • 代码可读性：
    明确告诉其他开发者：“这里有一个权限检查，但我不需要它的结果”。

前端：基于 Vuex 的前端状态管理 + JWT 认证体系

import axios from 'axios'
import { API_URLS } from '@/config/api'const state = {token: localStorage.getItem('token') || null,user: null,permissions: [],role: null
}const mutations = {SET_TOKEN(state, token) {state.token = tokenlocalStorage.setItem('token', token)axios.defaults.headers.common['Authorization'] = `Bearer ${token}`},CLEAR_TOKEN(state) {state.token = nulllocalStorage.removeItem('token')delete axios.defaults.headers.common['Authorization']},SET_USER(state, user) {state.user = user},SET_PERMISSIONS(state, permissions) {state.permissions = permissions},SET_ROLE(state, role) {state.role = role}
}const actions = {async login({ commit }, { username, password }) {const response = await axios.post(API_URLS.LOGIN, { username, password })commit('SET_TOKEN', response.data.access_token)commit('SET_PERMISSIONS', response.data.permissions)return response.data},async fetchPermissions({ commit, state }) {if (!state.token) returnconst response = await axios.get(API_URLS.PERMISSIONS)commit('SET_PERMISSIONS', response.data.permissions)return response.data},logout({ commit }) {commit('CLEAR_TOKEN')commit('SET_USER', null)commit('SET_PERMISSIONS', [])commit('SET_ROLE', null)},async getPermissions({ commit }) {const response = await axios.get('/auth/permissions')commit('SET_PERMISSIONS', response.data)return response.data}
}export default {namespaced: true,state,mutations,actions
}
import { createStore } from 'vuex'
import user from './modules/user'  // 导入user模块export default createStore({state: {userId: '',isAuthenticated: false},mutations: {setUserId(state, id) {state.userId = parseInt(id)state.isAuthenticated = !!id}},modules: {user  // 注册user模块},// 添加持久化plugins: [store => {// 初始化时从 localStorage 获取状态const userId = localStorage.getItem('userId')if (userId) {store.commit('setUserId', userId)}// 订阅 mutationstore.subscribe((mutation, state) => {if (mutation.type === 'setUserId') {localStorage.setItem('userId', state.userId)}})}]
})

这两部分代码共同构成了一个 基于 Vuex 的前端状态管理 + JWT 认证体系，主要处理用户认证、权限管理和状态持久化。以下是详细解析：

1. user 模块（核心功能）

作用：管理用户登录状态、令牌(Token)、权限和角色信息。
const state = {token: localStorage.getItem('token') || null,  // 从本地存储初始化Tokenuser: null,      // 用户信息permissions: [], // 权限列表role: null       // 用户角色
}
关键方法：
方法/属性功能说明
mutations.SET_TOKEN存储Token到Vuex和localStorage，并设置Axios全局请求头(Authorization)
mutations.CLEAR_TOKEN退出登录时清除Token和Axios请求头
actions.login提交登录请求，保存Token和权限到Vuex
actions.logout清理所有用户状态（Token、用户信息、权限等）
actions.fetchPermissions主动获取用户权限（需Token有效）
流程示例：

  1. 用户登录

  1. 权限控制

    • 前端根据 state.permissions 动态渲染菜单/按钮。

    • 每次API请求自动携带JWT（通过Axios拦截器）。

2. index.js（Vuex主仓库）

作用：全局状态管理 + 模块整合 + 持久化。
export default createStore({state: {userId: '',             // 全局用户IDisAuthenticated: false  // 认证状态},modules: {user  // 注册user模块（嵌套状态）},plugins: [ /* 持久化逻辑 */ ]
})
关键设计：

  1. 模块化

    • 将用户相关状态（user模块）与全局状态分离，避免命名冲突。

    • 通过 namespaced: true 启用模块命名空间。

  2. 状态持久化

    • 初始化时：从 localStorage 读取 userId 恢复登录状态。

    • 状态变化时：通过 store.subscribe 监听 setUserId 突变，自动同步到 localStorage。

  3. 认证状态同步

    • isAuthenticated 由 userId 自动计算得出（!!id 转为布尔值）。

http://www.xdnf.cn/news/264169.html

相关文章：

  • Seata RM的事务提交与回滚源码解析
  • 六大机器学习算法全解析：企业级开发实战与深度理解
  • AWS云服务深度技术解析：架构设计与最佳实践
  • Android Compose 物联网（IoT）UI 组件库封装指南
  • Dev-C++下载安装使用教程
  • 单细胞测序数据分析流程的最佳实践
  • Java学习手册：关系型数据库基础
  • 爬虫准备前工作
  • 【AI面试准备】NLP解析API文档生成测试脚本
  • 二叉树 - JS - 2
  • 49-dify案例分享-私有化 MCP 广场搭建与网页小游戏智能体工作流实战
  • 学习Cesium自定义材质
  • 硬件工程师面试常见问题（12）
  • 【LeetCode Hot100】贪心篇
  • 在pycharm profession 2020.3将.py程序使用pyinstaller打包成exe
  • Windows 中使用dockers创建指定java web 为镜像和运行容器
  • C++ STL vector高级特性与实战技巧
  • AVFormatContext 再分析零
  • 在Windows系统中使用Docker发布镜像到镜像仓库
  • 用PyTorch搭建卷积神经网络实现MNIST手写数字识别
  • 生成式 AI 的工作原理
  • Elasticsearch 中的索引模板：如何使用可组合模板
  • 【在Spring Boot中集成Redis】
  • 【赵渝强老师】TiDB生态圈组件
  • 3D人物关系图开发实战：Three.js实现自动旋转可视化图谱（附完整代码）
  • 人工智能助力工业制造：迈向智能制造的未来
  • 别样健康养生之道
  • AI 与生物技术的融合：开启精准医疗的新纪元
  • ros2 humble 控制真实机械臂（以lerobot为例）
  • 一种基于重建前检测的实孔径雷达实时角超分辨方法——论文阅读