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

数据库设计: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=codeclient_idredirect_uriscope

  2. 用户认证与同意

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

  3. 获取授权码

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

  4. 用授权码交换令牌

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

    • 携带:grant_type=authorization_codecoderedirect_uriclient_idclient_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_idpermissions 等)。

  • 设置令牌过期时间(默认 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_idpermissionsis_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.mzph.cn/pingmian/79327.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python实战】飞机大战

开发一个飞机大战游戏是Python学习的经典实战项目&#xff0c;尤其适合结合面向对象编程和游戏框架&#xff08;如Pygame&#xff09;进行实践。以下是游戏设计的核心考虑因素和模块划分建议&#xff1a; 一、游戏设计核心考虑因素 性能优化 Python游戏需注意帧率控制&#xff…

Flowable7.x学习笔记(十八)拾取我的待办

前言 本文从解读源码到实现功能&#xff0c;完整的学习Flowable的【TaskService】-【claim】方法实现的任务拾取功能。 一、概述 当调用 TaskService.claim(taskId, userId) 时&#xff0c;Flowable 会先加载并校验任务实体&#xff0c;再判断该任务是否已被认领&#xff1b;若…

SQL经典实例

第1章 检索记录 1.1 检索所有行和列 知识点&#xff1a;使用SELECT *快速检索表中所有列&#xff1b;显式列出列名&#xff08;如SELECT col1, col2&#xff09;提高可读性和可控性&#xff0c;尤其在编程场景中更清晰。 1.2 筛选行 知识点&#xff1a;通过WHERE子句过滤符合条…

HTTPcookie与session实现

1.HTTP Cookie 定义 HTTP Cookie &#xff08;也称为 Web Cookie 、浏览器 Cookie 或简称 Cookie &#xff09;是服务器发送到 用户浏览器并保存在浏览器上的一小块数据&#xff0c;它会在浏览器之后向同一服务器再次发 起请求时被携带并发送到服务器上。通常&#xff0…

【算法基础】冒泡排序算法 - JAVA

一、算法基础 1.1 什么是冒泡排序 冒泡排序是一种简单直观的比较排序算法。它重复地走访待排序的数列&#xff0c;依次比较相邻两个元素&#xff0c;如果顺序错误就交换它们&#xff0c;直到没有元素需要交换为止。 1.2 基本思想 比较相邻元素&#xff1a;从头开始&#xf…

0902Redux_状态管理-react-仿低代码平台项目

文章目录 1 Redux 概述1.1 核心概念1.2 基本组成1.3 工作流程1.4 中间件&#xff08;Middleware&#xff09;1.5 适用场景1.6 优缺点1.7 Redux Toolkit&#xff08;现代推荐&#xff09;1.8 与其他工具的对比1.9 总结 2 todoList 待办事项案例3 Redux开发者工具3.1 核心功能3.2…

《ATPL地面培训教材13:飞行原理》——第6章:阻力

翻译&#xff1a;Leweslyh&#xff1b;工具&#xff1a;Cursor & Claude 3.7&#xff1b;过程稿 第6章&#xff1a;阻力 目录 引言寄生阻力诱导阻力减少诱导阻力的方法升力对寄生阻力的影响飞机总阻力飞机总重量对总阻力的影响高度对总阻力的影响构型对总阻力的影响速度稳…

C++总结01-类型相关

一、数据存储 1.程序数据段 • 静态&#xff08;全局&#xff09;数据区&#xff1a;全局变量、静态变量 • 堆内存&#xff1a;程序员手动分配、手动释放 • 栈内存&#xff1a;编译器自动分配、自动释放 • 常量区&#xff1a;编译时大小、值确定不可修改 2.程序代码段 •…

【Hot 100】94. 二叉树的中序遍历

目录 引言二叉树的中序遍历我的解题代码优化更清晰的表述建议&#xff1a; &#x1f64b;‍♂️ 作者&#xff1a;海码007&#x1f4dc; 专栏&#xff1a;算法专栏&#x1f4a5; 标题&#xff1a;【Hot 100】94. 二叉树的中序遍历❣️ 寄语&#xff1a;书到用时方恨少&#xff…

大语言模型(LLMs)微调技术总结

文章目录 全面总结当前大语言模型&#xff08;LLM&#xff09;微调技术1. 引言2. 为什么需要微调&#xff1f;3. 微调技术分类概览4. 各种微调技术详细介绍4.1 基础微调方法4.1.1 有监督微调&#xff08;Supervised Fine-Tuning, SFT&#xff09;4.1.2 全参数微调&#xff08;F…

解决Maven项目中报错“java不支持版本6即更高的版本 7”

错误背景 当Maven项目编译或运行时出现错误提示 Java不支持版本6即更高的版本7&#xff0c;通常是由于项目配置的JDK版本与当前环境或编译器设置不一致导致的。例如&#xff1a; 项目配置的Java版本为6或7&#xff0c;但实际使用的是JDK 17。Maven或IDE的编译器未正确指定目标…

C++笔记-多态(包含虚函数,纯虚函数和虚函数表等)

1.多态的概念 多态(polymorphism)的概念:通俗来说&#xff0c;就是多种形态。多态分为编译时多态(静态多态)和运行时多态(动态多态)&#xff0c;这里我们重点讲运行时多态&#xff0c;编译时多态(静态多态)和运行时多态(动态多态)。编译时多态(静态多态)主要就是我们前面讲的函…

【Unity】MVP框架的使用例子

在提到MVP之前&#xff0c;可以先看看这篇MVC的帖子&#xff1a; 【Unity】MVC的简单分享以及一个在UI中使用的例子 MVC的不足之处&#xff1a; 在MVC的使用中&#xff0c;会发现View层直接调用了Model层的引用&#xff0c;即这两个层之间存在着一定的耦合性&#xff0c;而MV…

前端js学算法-实践

1、两数之和 const twoSum (nums, target) > {const obj {}for (let m 0; m < nums.length; m) {const cur nums[m]const diff target - curif(obj.hasOwnProperty(diff)){ // 查询对象中是否存在目标值-当前值键值对console.log([obj[diff], m]) // 存在则直接获取…

《MATLAB实战训练营:从入门到工业级应用》趣味入门篇-用声音合成玩音乐:MATLAB电子琴制作(超级趣味实践版)

《MATLAB实战训练营&#xff1a;从入门到工业级应用》趣味入门篇-用声音合成玩音乐&#xff1a;MATLAB电子琴制作&#xff08;超级趣味实践版&#xff09; 开篇&#xff1a;当MATLAB遇见音乐 - 一场数字与艺术的浪漫邂逅 想象一下&#xff0c;你正坐在一台古老的钢琴前&#x…

实战探讨:为什么 Redis Zset 选择跳表?

在了解了跳表的原理和实现后&#xff0c;一个常见的问题&#xff08;尤其是在面试中&#xff09;随之而来&#xff1a;为什么像 Redis 的有序集合 (Zset) 这样的高性能组件会选择使用跳表&#xff0c;而不是大家熟知的平衡树&#xff08;如红黑树&#xff09;呢&#xff1f; 对…

数据结构-线性结构(链表、栈、队列)实现

公共头文件common.h #define TRUE 1 #define FALSE 0// 定义节点数据类型 #define DATA_TYPE int单链表C语言实现 SingleList.h #pragma once#include "common.h"typedef struct Node {DATA_TYPE data;struct Node *next; } Node;Node *initList();void headInser…

高中数学联赛模拟试题精选学数学系列第3套几何题

△ A B C \triangle ABC △ABC 的内切圆 ⊙ I \odot I ⊙I 分别与边 B C BC BC, C A CA CA, A B AB AB 相切于点 D D D, E E E, F F F, D D ′ DD DD′ 为 ⊙ I \odot I ⊙I 的直径, 过圆心 I I I 作直线 A D ′ AD AD′ 的垂线 l l l, 直线 l l l 分别与 D E DE…

使用 ossutil 上传文件到阿里云 OSS

在处理文件存储和传输时&#xff0c;阿里云的对象存储服务&#xff08;OSS&#xff09;是一个非常方便的选择。特别是在需要批量上传文件或通过命令行工具进行文件管理时&#xff0c;ossutil提供了强大的功能。本文将详细说明如何使用 ossutil 上传文件到阿里云 OSS&#xff0c…

DeepSeek与MySQL:开启数据智能新时代

目录 一、引言&#xff1a;技术融合的力量二、DeepSeek 与 MySQL&#xff1a;技术基石2.1 DeepSeek 技术探秘2.2 MySQL 数据库深度解析 三、DeepSeek 与 MySQL 集成&#xff1a;从理论到实践3.1 集成原理剖析3.2 集成步骤详解 四、应用案例&#xff1a;实战中的价值体现4.1 电商…