vue2如何做状态管理，权限管理

在 Vue 2 中，官方推荐的状态管理工具是 Vuex，而权限管理则通常基于 Vuex 存储的用户信息，结合路由守卫、自定义指令和动态路由等技术来实现。

🧠 状态管理：用 Vuex 打造“数据中心”

Vuex 是一个专为 Vue.js 应用设计的状态管理模式，它采用集中式存储来管理所有组件的状态。你可以把它想象成一个所有组件都能访问的“数据中心”，当多个组件需要共享同一份数据时，Vuex 就特别有用。

• 核心概念：Vuex 的核心由三部分组成：

  • State：存放共享数据的地方。

  • Mutations：修改 State 的唯一途径，是同步操作。

  • Actions：用于处理异步操作（如 API 请求），再通过提交 Mutations 来改变 State。

• 数据流：组件通过 dispatch 触发 Actions，Actions 再通过 commit 触发 Mutations，最终由 Mutations 修改 State。State 变化后，所有依赖它的组件会自动更新。

• 重要提醒：Vuex 的数据存储在内存中，页面刷新后会丢失。解决这个问题通常需要将数据持久化到 localStorage 或 sessionStorage。可以使用 vuex-persistedstate 插件来方便地实现。

对于新项目，Vue 官方现在更推荐使用 Pinia，它更轻量且对 TypeScript 支持更好。但在 Vue 2 项目中，Vuex 依然是成熟、可靠且生态完善的首选。

🛡️ 权限管理：构建应用的“安检系统”

权限管理的核心是根据用户的角色或权限，控制他能看到什么和做什么。这通常结合 Vuex 一起实现。

一个典型的权限管理流程如下：

1. 用户登录：登录成功后，后端返回用户信息（如角色 role 或权限码列表 permissions），并将其存入 Vuex。

2. 路由拦截：在路由跳转前，通过路由守卫进行权限检查。

3. 动态渲染：根据权限，动态生成可访问的路由和菜单，并在页面中通过自定义指令控制按钮等元素的显隐。

1. 路由权限 (页面级)

控制用户能访问哪些页面，主要通过路由守卫和动态路由实现。

• 路由守卫：在 router.beforeEach 中拦截路由跳转，检查用户是否登录以及是否有权限访问目标页面。权限信息可以通过路由的 meta 字段来配置。

  javascript

  // router/index.js
  router.beforeEach((to, from, next) => {
    const userRole = store.state.user.role; // 从 Vuex 获取用户角色
    if (to.meta.requiresAuth) { // 检查该路由是否需要权限
      if (to.meta.roles.includes(userRole)) {
        next(); // 有权限，放行
      } else {
        next('/403'); // 无权限，跳转到无权限页面
      }
    } else {
      next(); // 不需要权限，直接放行
    }
  });

• 动态路由：根据用户权限，从后端获取对应的路由列表，再用 router.addRoutes() 动态添加。注意：addRoutes 添加的路由不是响应式的，直接修改 this.$router.options.routes 不会触发菜单更新。

  • 最佳实践：将用于展示的菜单数据保存在 Vuex 中管理。路由守卫只负责用 addRoutes 添加路由，而侧边栏菜单则渲染 Vuex 中存储的菜单数据，保证页面能响应式更新。

2. 按钮权限 (元素级)

控制页面内按钮、链接等元素的显隐或可用状态。最优雅的方式是使用自定义指令。

• 实现步骤：

  1. 定义指令：注册一个全局指令（如 v-permission），在其 inserted 钩子中，从 Vuex 获取当前用户的权限列表。

  2. 权限校验：将指令的值（如 v-permission="['admin']"）与用户权限列表比对。

  3. 控制元素：如果没有权限，则通过 el.parentNode.removeChild(el) 移除该元素。

• 代码示例：

  javascript

  // 在 main.js 中注册指令
  Vue.directive('permission', {
    inserted(el, binding) {
      const { value } = binding; // 获取指令的值，如 ['admin', 'editor']
      const userPermissions = store.state.user.permissions; // 从 Vuex 获取用户权限列表
  
      if (value && value instanceof Array && value.length > 0) {
        const hasPermission = userPermissions.some(role => {
          return value.includes(role);
        });
  
        if (!hasPermission) {
          el.parentNode && el.parentNode.removeChild(el); // 没有权限，移除元素
        }
      }
    }
  });

  使用方式：

  html

  <!-- 只有拥有 'admin' 或 'editor' 权限的用户才能看到这个按钮 -->
  <el-button v-permission="['admin', 'editor']">编辑</el-button>

💎 总结

在 Vue 2 中，状态管理依赖 Vuex，权限管理则以此为基础：

1. 使用 Vuex 存储用户信息和权限数据。

2. 使用路由守卫控制页面（路由） 访问权限。

3. 使用动态路由 + Vuex 实现动态菜单。

4. 使用自定义指令（如 v-permission）精细控制按钮等元素的显隐。