Vue登录权限设计

一、登录流程

1. 表单验证：验证账号和密码是否符合验证规则，验证通过后发起登录请求

2. 这个登录只用于获取 token 注意：这里 token 必须存在缓存里—否则后面的刷新获取动态路由就失效了。

3. 成功获取 token 后进行路由跳转

4. 路由跳转执行路由守卫进行拦截

   1. 不是去登录的路由，验证是否有 token，没有 token 就去登录

   2. 有 token 的情况

      1. 在 pinia 下获取用户的角色，如果有角色，就直接放行

      2. 没有角色的情况 说明是第一次登录（或者是由于刷新导致的 role 丢失）。

         1. 调取接口获取用户的详细信息：比如说用户名，id,role,图片，电话等信息。

         2. 根据用户的角色，映射生成可以访问的路由，进行动态路由注册，根据生成的可访问路由生成访问菜单。

            next({ ...to, replace: true });

二、登录逻辑

1. 原则：采取前端控制权限的方法，实现接口级权限，路由级权限，按钮级权限。
2. 后端只需要发送用户 token 和对应的角色即可，前端根据写的路由中的 meta 信息生成当前角色可以访问