1. 接口权限控制
接口权限控制通常通过 JWT（JSON Web Token）实现。后端通过 JWT 插件生成 token，前端将 token 存储，并在每次请求时将token 字段发送给后端进行验证。
实现方式：
- 前端处理：在每次请求时，将
token放入请求头中。 - 后端验证：后端接收到请求后，验证
token的有效性。 - Token 失效处理：如果
token失效（如 401 错误），前端需要重定向到登录页面。
2. 路由权限控制
路由权限控制确保不同用户根据其角色访问不同的页面或功能模块。实现路由权限控制有两种常见方案：
方案一：后端动态返回路由配置
后端根据用户角色返回不同的路由表，前端根据后端返回的路由动态生成路由配置。这种方式适合需要灵活管理权限的场景，路由配置完全由后端控制。
实现步骤：
- 后端返回路由配置：后端在用户登录成功后，根据用户的角色或权限，返回一份包含该用户可以访问的路由表的 JSON 数据。
- 前端接收路由配置：前端通过 API 调用后端的接口，获取路由配置。
- 前端生成路由：前端通过 Vue Router 动态添加路由，将后端返回的路由表注入到 Vue Router 中。
- 渲染页面：前端根据动态添加的路由，展示用户可以访问的页面。
方案二：前端基于角色的路由表
- 前端配置好完整的路由表，并通过在
meta对象中设置roles属性来指定哪些角色可以访问某些路由。 - 通过 Vue Router 的导航守卫
beforeEach()来进行权限校验，拦截不符合权限的访问请求。
3. 按钮权限控制
通过自定义指令，可以根据用户的权限动态控制按钮的显示与隐藏。以后台管理系统为例，每个用户所拥有的按钮权限不一样。管理员配置权限之后，用户登录时，从接口拿到按钮权限列表，然后根据后台数据判断显示哪些按钮。
实现方式：
- 管理员配置权限之后，用户登录时，从接口拿到按钮权限列表，然后根据后台数据判断当前用户是否有权限执行某个操作（如编辑、删除、新增等）。
- 通过自定义指令
v-has来控制按钮是否显示。
