数据库设计:RBAC数据模型
这是一个典型的基于SQLAlchemy的RBAC权限系统数据模型实现,各模型分工明确,共同构成完整的权限管理系统。
图解说明:
-
实体关系:
-
用户(USER)和角色(ROLE)通过 USER_ROLE 中间表实现多对多关系
-
角色(ROLE)和权限(PERMISSION)通过 ROLE_PERMISSION 中间表实现多对多关系
-
-
关键连接点:
USER → USER_ROLE ← ROLE → ROLE_PERMISSION ← PERMISSION
这个链条完整表达了"用户→角色→权限"的授权路径
-
箭头含义:
-
||--o{
表示一对多关系 -
PK
表示主键 -
FK
表示外键
-
-
实际业务流:
当检查用户是否有某接口的访问权限时,系统会:用户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
: 关联到权限表
-
-
业务意义:实现"角色包含哪些权限"的映射关系
整体协作流程
-
管理员创建权限(Permission)并定义其对应的资源
-
创建角色(Role)并将相关权限关联到角色(RolePermission)
-
为用户分配角色(UserRole)
-
系统通过检查用户的角色→权限→资源路径链来确定访问权限
这种设计实现了权限管理的解耦,使系统能够灵活应对权限变更,同时通过中间表实现了多对多关系的维护。
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 流程 (授权码模式)
-
用户发起授权请求
-
客户端将用户重定向到授权服务器
-
携带参数:
response_type=code
,client_id
,redirect_uri
,scope
等
-
-
用户认证与同意
-
用户在授权服务器登录并同意请求的权限
-
-
获取授权码
-
授权服务器返回授权码到客户端的
redirect_uri
-
-
用授权码交换令牌
-
客户端向授权服务器的令牌端点发送请求
-
携带:
grant_type=authorization_code
,code
,redirect_uri
,client_id
,client_secret
-
-
返回JWT令牌
-
授权服务器验证后返回访问令牌(通常是JWT)和刷新令牌
-
响应示例:
{"access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...","token_type": "Bearer","expires_in": 3600,"refresh_token": "def50200ae2f..." }
-
-
使用访问令牌访问资源
-
客户端在请求头中加入:
Authorization: Bearer <access_token>
-
资源服务器验证JWT签名和声明
-
-
刷新令牌(可选)
-
当访问令牌过期时,使用刷新令牌获取新的访问令牌
-
JWT在OAuth中的优势
-
自包含:JWT包含所有必要信息,减少数据库查询
-
可验证性:资源服务器可以独立验证JWT而不需联系授权服务器
-
标准化结构:易于跨语言和平台实现
# 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 的权限检查依赖工厂函数,主要用于实现基于权限的访问控制。它的主要作用和功能如下:
-
功能概述:
-
它是一个装饰器工厂函数,接收一个权限名称作为参数,返回一个 FastAPI 依赖项
-
用于检查当前请求的用户是否拥有指定的权限
-
-
工作流程:
-
从请求中获取用户 ID
-
查询数据库验证用户是否存在
-
检查用户是否是管理员角色(role_name 为 'admin'),如果是则直接通过检查
-
对于非管理员用户,检查用户是否拥有指定的权限
-
如果没有权限则返回 403 错误
-
-
权限检查逻辑:
-
通过连接查询检查用户角色关联的权限
-
查询涉及多个表:User → UserRole → RolePermission → Permission
-
只有当用户至少有一个角色拥有指定的权限时才会通过检查
-
-
异常处理:
-
未认证用户(无 user_id):返回 401
-
用户不存在:返回 401
-
权限不足:返回 403
-
什么是中间件?
在 Web 开发中,中间件(Middleware) 是一种机制,用于在 HTTP 请求到达路由处理函数之前 或 响应返回客户端之前 执行某些逻辑。它类似于一个“拦截器”,可以对请求和响应进行预处理或后处理。
中间件的作用
-
全局处理请求/响应
-
例如:身份验证、日志记录、跨域处理(CORS)、请求限流、数据压缩等。
-
-
修改请求或响应
-
例如:添加请求头、解析请求体、修改响应数据。
-
-
拦截非法请求
-
例如:检查权限(如你的
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 路由处理函数,用于实现用户登录认证流程。它的核心作用是:
主要功能
-
用户身份认证
-
接收前端提交的用户名和密码(通过
LoginRequest
模型)。 -
验证用户名是否存在、密码是否正确。
-
返回 401 错误码和提示信息(如 "user not found" 或 "password error")。
-
-
权限和角色信息收集
-
查询用户的角色(如
user_roles
)并检查是否是管理员(is_admin
)。 -
查询用户拥有的权限列表(
permissions
)。
-
-
生成 JWT 令牌
-
使用
create_access_token
生成包含用户信息的 JWT(有效期通过ACCESS_TOKEN_EXPIRE_MINUTES
控制)。 -
令牌中存储的关键数据:
{"sub": "用户ID", # 用户唯一标识"username": "用户名","permissions": ["权限1", "权限2"], # 用户权限列表"is_admin": True/False, # 是否是管理员"roles": ["角色1", "角色2"] # 用户角色列表 }
-
-
返回登录结果
-
返回 200 状态码和用户信息(包括令牌、权限、角色等),供前端后续使用。
-
详细流程
-
参数接收
-
通过
LoginRequest
模型(未展示但应包含username
和password
字段)接收前端提交的登录数据。
-
-
用户验证
-
调用
AuthService.select_user_info
查询数据库,检查用户名是否存在。 -
比对数据库中的密码(明文比对,实际项目中应使用 哈希密码比对,如
bcrypt
)。
-
-
权限角色查询
-
通过
AuthService.get_user_roles
获取用户角色列表,并检查是否包含admin
角色。 -
通过
AuthService.get_user_permissions
获取用户权限列表(用于前端动态路由或按钮权限控制)。
-
-
令牌生成
-
使用
create_access_token
(可能是fastapi-jwt
或类似库)生成 JWT,包含用户关键信息。
-
-
响应返回
-
返回结构化响应,包含令牌和用户信息,例如:
{"code": 200,"message": "success","data": {"user_id": 123,"username": "john","access_token": "xxx.yyy.zzz","permissions": ["read", "write"],"roles": ["user"],"is_admin": false} }
-
关键点说明
-
安全注意事项
-
密码明文存储问题:当前代码直接比对明文密码,实际项目应使用 密码哈希(如
bcrypt
)存储和验证。 -
JWT 敏感信息:令牌中存储了
permissions
和roles
,需确保 JWT 使用 HTTPS 传输并设置合理有效期。
-
-
权限控制设计
-
前端可根据返回的
permissions
和roles
动态渲染界面。 -
后端可通过
permission_required
中间件(如你之前提供的)进一步校验权限。
-
-
扩展性
-
可添加登录日志记录、多设备登录限制、验证码等功能。
-
典型使用场景
-
前端提交登录表单 → 后端验证 → 返回令牌。
-
前端将令牌存储在
localStorage
或Cookie
中,后续请求通过Authorization: Bearer <token>
头部携带。 -
其他受保护的路由通过中间件校验令牌和权限(如
@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_middleware | get_current_user |
---|---|---|
作用范围 | 全局(所有请求) | 单个路由(需显式声明 Depends ) |
认证严格性 | 静默失败(仅注入数据) | 严格失败(401 错误) |
典型用途 | 日志、基础用户信息注入 | 需要强认证的路由 |
协作流程
-
用户登录
-
调用
create_access_token
生成令牌并返回给前端。
-
-
前端请求
-
在请求头中添加
Authorization: Bearer <token>
。
-
-
请求处理
-
auth_middleware
拦截请求,解析令牌并注入用户信息到request.state
。 -
路由层可通过
get_current_user
进一步严格校验(如需要权限的接口)。
-
安全注意事项
-
密钥管理
-
SECRET_KEY
必须保密,且不要硬编码在代码中(从环境变量读取)。
-
-
令牌有效期
-
生产环境中
ACCESS_TOKEN_EXPIRE_MINUTES
不宜过长(通常 15-60 分钟)。
-
-
算法选择
-
推荐使用
HS256
(对称加密)或RS256
(非对称加密)。
-
-
中间件静默失败
-
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. 执行流程
-
请求到达路由
当客户端访问GET /api/abilities
时,FastAPI 会先执行permission_required("abilities_read")
的校验逻辑。 -
权限校验
-
如果用户 有权限:继续执行
get_abilities
函数体。 -
如果用户 无权限:直接返回
403 Forbidden
错误(由permission_required
抛出)。
-
-
处理业务逻辑
只有通过权限校验后,才会调用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有效) |
流程示例:
-
用户登录
-
权限控制
-
前端根据
state.permissions
动态渲染菜单/按钮。 -
每次API请求自动携带JWT(通过Axios拦截器)。
-
2. index.js
(Vuex主仓库)
作用:全局状态管理 + 模块整合 + 持久化。
export default createStore({state: {userId: '', // 全局用户IDisAuthenticated: false // 认证状态},modules: {user // 注册user模块(嵌套状态)},plugins: [ /* 持久化逻辑 */ ]
})
关键设计:
-
模块化
-
将用户相关状态(
user
模块)与全局状态分离,避免命名冲突。 -
通过
namespaced: true
启用模块命名空间。
-
-
状态持久化
-
初始化时:从
localStorage
读取userId
恢复登录状态。 -
状态变化时:通过
store.subscribe
监听setUserId
突变,自动同步到localStorage
。
-
-
认证状态同步
-
isAuthenticated
由userId
自动计算得出(!!id
转为布尔值)。
-