本文档详细介绍了 vue-element-admin 中实现的身份验证和授权系统。它涵盖了登录流程、基于令牌的身份验证、基于角色的访问控制以及权限管理机制。有关权限之外的一般路由系统的更多信息，请参阅 路由系统。
Vue Element Admin 实现了一个基于令牌的身份验证系统，该系统与基于角色的授权协同工作。该系统管理用户会话、限制对受保护路由的访问，并根据用户权限实现 UI 元素的条件渲染。
来源
身份验证过程从登录页面开始，用户在此处输入其凭据。提交后，凭据将被验证并获取令牌。
登录表单实现在 Login 组件中，该组件收集用户名和密码输入，并将登录操作分派到 Vuex 存储。
用于测试的默认用户凭据包括
admin，密码：任意editor，密码：任意来源
身份验证令牌通过 js-cookie 库使用 Cookie 进行管理。该系统提供了用于设置、获取和删除令牌的实用程序。
令牌操作集中在 auth 工具模块中
| 功能 | 目的 | 实现 |
|---|---|---|
getToken() | 从 Cookie 中检索令牌 | 返回“Admin-Token”的值 |
setToken(token) | 将令牌存储在 Cookie 中 | 将“Admin-Token”设置为提供的值 |
removeToken() | 从 Cookie 中删除令牌 | 删除“Admin-Token” Cookie |
来源
Vue Element Admin 中的权限控制基于用户角色，这些角色决定了可以访问哪些路由和 UI 元素。
系统使用全局路由守卫在导航到路由之前检查权限
路由访问由以下方式控制：
/login, /auth-redirect）来源
路由分为两类：
路由可以在其 meta 属性中指定所需的角色
meta: {
roles: ['admin', 'editor'] // Required roles for route access
}
来源
身份验证成功后，系统会获取用户信息，包括角色、姓名和头像。
Vuex 用户模块维护以下状态：
| 状态属性 | 描述 |
|---|---|
token | 用户身份验证令牌 |
名称 | 用户的姓名 |
avatar | 用户的头像 URL |
introduction | 用户的简介文本 |
roles | 用户角色数组 |
来源
用户信息在身份验证成功后检索
来源
根据用户的角色，系统会动态生成可访问的路由。
路由生成过程涉及根据用户角色过滤异步路由
meta.roles 属性来源
该系统提供了指令，用于根据用户权限有条件地显示或隐藏 UI 元素。
可以根据用户角色有条件地渲染元素
权限检查也可以在组件内以编程方式执行
来源
Vue Element Admin 通过不同的页面视图和组件展示了基于角色的授权，适用于不同的用户角色。
编辑器仪表板显示特定于用户的信息，包括用户的角色
来源
该系统包含几个权限控制示例
来源
该系统支持动态更改用户角色，这会重新构建可访问的路由
来源
登出流程包括清除用户状态、移除令牌和重置路由器
来源
系统包含身份验证失败的错误处理
来源