浅谈vue权限管理实现及流程

一、整体思路 后端返回用户权限，前端根据用户权限处理得到左侧菜单；所有路由在前端定义好，根据后端返回的用户权限筛选出需要挂载的路由，然后使用 addRoutes 动态挂载路由。 二、实现要点 （1）路由定义，分为初始路由和动态路由，一般来说初始路由只有 login，其他路由都挂载在 home 路由之下需要动态挂载。 （2）用户登录，登录成功之后得到 token，保存在 sessionStorage，跳转到 home，此时会进入路由拦截根据 token 获取用户权限列表。 （3）全局路由拦截，根据当前用户有没有 token 和 权限列表进行相应的判断和跳转，当没有 token 时跳到 log Vue权限管理实现主要涉及到前端与后端的交互，以及对用户访问权限的控制。下面将详细阐述这个过程。 整体思路是后端服务器在用户登录成功后返回其权限信息，前端根据这些权限来构建用户的个性化菜单。所有的路由在前端已经预先定义好，但根据用户的权限，前端会动态地挂载部分路由。这是通过Vue Router提供的`addRoutes`功能实现的。 1. **路由定义**：路由通常分为两部分，初始路由和动态路由。初始路由如登录页`/login`，一般不依赖用户权限。其他路由，如各种功能页面，通常挂载在`/home`下，需要根据用户权限动态挂载。 2. **用户登录**：用户登录成功后，服务器返回一个`token`，这个`token`会被存储在`sessionStorage`中。接着，用户被重定向到主页`/home`。此时，路由拦截器会启动，根据`token`获取用户权限列表。 3. **全局路由拦截**：Vue Router的全局前置守卫`beforeEach`用于拦截每次路由切换。如果用户没有`token`，则将其重定向到登录页`/login`。如果拥有`token`但未获取到权限列表，应用会发送请求获取这些信息。 4. **处理用户权限**：在`store.js`中创建一个`permission.js`模块，专门负责处理与用户权限相关的逻辑。权限列表和菜单列表都将存储在这个模块中。 5. **权限与菜单的对应**：后端返回的权限信息需要与前端路由对应，一般通过路由名称作为标识符，筛选出用户有权访问的路由。 6. **左侧菜单**：左侧菜单应与用户信息中的权限保持一致，使用存储在Vuex状态管理库`store`中的变量来同步和更新菜单。 具体实现流程如下： 1. **准备工作**：在`router/index.js`中定义初始路由和准备动态添加的路由。动态路由通常包含大部分功能页面，它们将在用户权限校验后被添加到`/home`的子路由中。 2. **用户登录**：在登录组件中，发送登录请求，登录成功后将`token`存入`sessionStorage`，并使用`router.push`导航到`/home`，这会触发全局路由拦截。 3. **全局路由拦截**：在`router.js`中设置全局路由守卫，检查`sessionStorage`中的`token`，无`token`则重定向至登录页。有`token`但无权限信息时，向后端请求权限列表。 4. **权限筛选与菜单生成**：根据获取到的权限列表，筛选出用户可以访问的路由，并将它们添加到`/home`的子路由中，实现动态菜单。 5. **数据同步**：左侧菜单的数据来源于`store`中的权限和菜单列表，确保用户只能看到并访问他们有权访问的页面。 通过以上步骤，Vue应用程序能够实现精细的权限管理，确保用户只能访问他们被授权的功能，提高系统的安全性和用户体验。在实际项目中，可能还需要考虑权限的更新、刷新令牌等问题，以实现更完善的权限管理体系。