Appearance
权限控制与路由守卫
**本文引用的文件** - [main.js](file://app/devicemate-app/main.js) - [login.js](file://app/devicemate-app/config/login.js) - [baseUrl.js](file://app/devicemate-app/config/baseUrl.js) - [request.js](file://app/devicemate-app/config/request.js) - [index.js（设备端Store模块索引）](file://app/devicemate-app/store/modules/index.js) - [login.js（设备端登录Store模块）](file://app/devicemate-app/store/modules/login.js) - [pages.json](file://app/devicemate-app/pages.json) - [App.vue](file://app/devicemate-app/App.vue) - [localstorage.js](file://app/devicemate-app/utils/localstorage.js) - [userMixins.js](file://app/devicemate-app/utils/userMixins.js) - [common.js](file://app/devicemate-app/utils/common.js) - [dictMixins.js](file://app/devicemate-app/utils/dictMixins.js) - [mescroll-uni.js](file://app/devicemate-app/components/mescroll-uni/mescroll-uni.js) - [mescroll-mixins.js](file://app/devicemate-app/components/mescroll-uni/mescroll-mixins.js) - [upgrade.js](file://app/devicemate-app/utils/upgrade/upgrade.js) - [upgrade-config.js](file://app/devicemate-app/utils/upgrade/upgrade-config.js) - [dialog.js](file://app/devicemate-app/utils/upgrade/dialog.js)目录
简介
本文件面向DeviceMate移动端应用（基于uni-app）的权限控制系统，聚焦于“路由守卫”的实现与最佳实践。当前仓库中未发现显式的全局前置路由守卫代码（如在路由库中注册的全局前置钩子），但已具备完善的登录态校验工具、用户信息存储与页面清单配置。本文将基于现有能力，系统化阐述如何通过登录态检查、页面级权限控制、路由跳转策略与缓存更新机制，构建可扩展的权限控制方案，并给出可落地的实施建议与常见问题处理。
项目结构
围绕权限控制与路由守卫的关键目录与文件如下：
- 应用入口与全局初始化：main.js、App.vue
- 登录态与鉴权工具：config/login.js、config/request.js、config/baseUrl.js、utils/localstorage.js
- 页面清单与导航配置：pages.json
- 状态管理模块：store/modules/index.js、store/modules/login.js
- 常用工具与混入：utils/common.js、utils/userMixins.js、utils/dictMixins.js
- 组件与UI：uview-ui、mescroll-uni等
图表来源
- main.js:1-49
- login.js:1-30
- request.js
- baseUrl.js
- index.js（设备端Store模块索引）:1-13
- login.js（设备端登录Store模块）:1-24
- pages.json:1-571
- localstorage.js
章节来源
核心组件
- 登录态校验工具：提供登录态检查与登录成功后的重定向逻辑，用于页面级或组件级的权限拦截。
- 请求封装与基础URL：统一HTTP请求与后端接口前缀，便于后续对接鉴权服务。
- 本地存储：提供userInfo等关键用户信息的持久化读写，是权限缓存的基础。
- Store登录模块：提供登录URL等状态的集中管理，便于在组件中读取与联动。
- 页面清单：定义应用页面与TabBar，为“白名单/黑名单”路由策略提供依据。
章节来源
架构总览
DeviceMate当前采用“页面级权限控制”思路：在页面进入时调用登录态校验函数，若未登录则跳转至登录页；登录成功后根据返回结果进行页面重定向。该模式无需全局前置守卫即可实现基本的登录保护与路由跳转控制。
图表来源
详细组件分析
登录态校验与路由跳转
- 登录态检查：从本地存储读取用户信息，若不存在则强制跳转至登录页。
- 登录成功回调：登录成功后写入用户信息并重定向至首页。
- 可扩展点：可在登录成功后拉取用户权限清单并写入本地存储，作为后续页面级权限判断的数据源。
图表来源
章节来源
页面清单与路由白名单/黑名单
- 白名单：登录页、ADFS登录页、错误页等特殊路由应纳入白名单，允许未登录用户访问。
- 黑名单：业务功能页（如设备管理、维修、巡检等）默认需登录，未登录时统一跳转至登录页。
- TabBar路由：首页、设备、消息、我的等TabBar页面可视为“半白名单”，通常允许访问但内部可能有子权限。
图表来源
章节来源
权限缓存策略与更新机制
- 缓存位置：userInfo、权限清单等关键信息建议存储于本地存储，避免每次进入页面都发起网络请求。
- 更新时机：登录成功后、用户主动刷新、或后台推送权限变更事件时触发更新。
- 失效处理：检测到token过期或服务端返回未授权时，清空本地用户信息并跳转登录页。
图表来源
章节来源
基于角色的访问控制（RBAC）与动态路由
- 角色元信息：可在页面清单或路由配置中增加roles元信息字段，用于标识页面所需的角色集合。
- 动态路由生成：登录成功后根据用户角色动态生成菜单与路由，注入到应用路由表中。
- 注入时机：建议在应用初始化阶段完成，确保页面进入时能快速匹配权限。
图表来源
章节来源
页面级权限控制与组件混入
- 在页面进入生命周期中调用登录态校验工具，必要时结合用户角色与页面roles元信息进行细粒度控制。
- 使用混入（mixins）将权限检查逻辑抽象为可复用的片段，减少重复代码。
图表来源
章节来源
依赖关系分析
- 应用入口依赖全局工具与状态管理，登录态校验工具依赖本地存储。
- 页面清单决定哪些页面属于白名单/黑名单，直接影响路由跳转策略。
- Store模块提供登录URL等状态，便于在组件中读取与联动。
图表来源
- main.js:1-49
- login.js:1-30
- request.js
- index.js（设备端Store模块索引）:1-13
- login.js（设备端登录Store模块）:1-24
- pages.json:1-571
- localstorage.js
章节来源
- main.js:1-49
- login.js:1-30
- index.js（设备端Store模块索引）:1-13
- login.js（设备端登录Store模块）:1-24
- pages.json:1-571
- localstorage.js
性能考虑
- 减少网络请求：将用户信息与权限清单缓存于本地存储，仅在登录成功或权限变更时更新。
- 避免重复校验：在页面进入时仅做一次登录态检查，避免在多次生命周期中重复校验。
- 路由注入优化：动态路由注入应在应用初始化阶段完成，避免在页面渲染过程中频繁修改路由表。
故障排查指南
- 无法跳转登录页
- 检查登录态校验函数是否被正确调用。
- 确认本地存储中userInfo是否为空。
- 排查重定向路径是否正确。
- 登录成功后未跳转首页
- 检查登录成功回调中的重定向逻辑。
- 确认返回的用户信息是否完整。
- 权限不生效
- 检查页面roles元信息与用户角色是否匹配。
- 确认权限清单是否已缓存且未过期。
- 页面白名单/黑名单误判
- 核对pages.json中的页面路径与跳转逻辑。
- 确认TabBar与普通页面的区分是否合理。
章节来源
结论
DeviceMate当前以“页面级权限控制”为核心，通过登录态校验工具与本地存储实现了基础的路由守卫效果。建议在此基础上逐步引入“基于角色的访问控制（RBAC）”与“动态路由注入”，并在应用初始化阶段完成权限数据的拉取与缓存，从而形成一套可扩展、可维护的权限控制体系。同时，完善白名单/黑名单配置与错误处理机制，确保用户体验与安全性。
附录
- 实施步骤建议
- 在登录成功后拉取用户角色与权限清单，写入本地存储。
- 在应用初始化阶段根据角色动态生成可访问路由并注入。
- 在页面进入时调用登录态校验与角色校验，未通过则跳转登录页。
- 定期轮询或监听权限变更事件，及时更新本地缓存。
- 常见问题
- 登录态丢失：清空本地用户信息并跳转登录页。
- 权限不足：提示无权限并引导至可访问页面。
- 路由注入失败：检查动态注入时机与路由表结构。