Vue 简单实现前端权限控制的示例

针对 “Vue 简单实现前端权限控制的示例” 的完整攻略，我将分为以下几个部分进行详细的讲解：

1. 前期准备
2. 实现权限控制的方式
3. 示例说明

前期准备

在进行权限控制的实现之前，我们需要提前做好以下几点准备：

• 熟悉 Vue 的基础语法和组件开发模式
• 新建一个项目并安装相关依赖，如 vue-router、axios 等

实现权限控制的方式

方式一：路由权限控制

Vue 的路由系统提供了很好的拓展性，我们可以在路由导航守卫（beforeEach）中判断当前用户是否有该路由的访问权限，如果没有，则跳转到指定的未授权页面（如权限不足提示页面）。

具体实现步骤如下：

1. 在路由的 meta 中定义需要的权限字段，如 meta: { role: 'user' }；
2. 在 router.beforeEach 中获取当前用户的角色信息；
3. 在进入路由前，判断当前用户是否有该路由的访问权限（即 meta.role 是否等于当前用户的角色）；
4. 如果没有，则跳转到指定的未授权页面。

以下是示例代码：

// src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
  },
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    meta: {
      role: 'user', // 定义需要 user 角色的权限
    },
    children: [
      {
        path: 'user',
        name: 'User',
        component: () => import('../views/User.vue')
      },
      {
        path: 'admin',
        name: 'Admin',
        component: () => import('../views/Admin.vue'),
        meta: {
          role: 'admin', // 定义需要 admin 角色的权限
        },
      },
    ]
  },
  {
    path: '/unauthorized',
    name: 'Unauthorized',
    component: () => import('../views/Unauthorized.vue')
  }
]

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  const role = localStorage.getItem('userRole'); // 获取当前用户的角色
  if (to.meta.role && to.meta.role !== role) { // 判断是否有该路由的访问权限
    next('/unauthorized'); // 跳转到未授权页面
  } else {
    next(); // 继续访问该路由
  }
})

export default router

方式二：组件内权限控制

在许多场景下，我们需要在组件内进行权限控制，比如在某个页面中显示不同的按钮和内容。这时候我们可以定义一个名为 permission 的自定义指令，在指令中判断当前用户是否有该组件的访问权限。

具体实现步骤如下：

1. 定义一个名为 permission 的自定义指令；
2. 在 bind 阶段获取当前用户的角色信息；
3. 根据当前组件的需要权限，在 update 阶段判断当前用户是否有该组件的访问权限；
4. 如果没有，则隐藏该组件。

以下是示例代码：

// src/directives/permission.js

function checkPermission(el, binding) {
  const { value } = binding; // 获取 v-permission 的值
  const role = localStorage.getItem('userRole'); // 获取当前用户的角色
  if (value && value.indexOf(role) === -1) { // 判断当前用户是否有该组件的访问权限
    el.style.display = 'none'; // 隐藏该组件
  }
}

export default {
  inserted(el, binding) {
    checkPermission(el, binding);
  },
  update(el, binding) {
    checkPermission(el, binding);
  }
}

在组件中引入该指令，在需要进行权限控制的组件上使用 v-permission，并传入需要的角色。例如，在 home 页面中，我们需要根据当前用户的角色显示不同的按钮：

<!-- src/views/Home.vue -->

<template>
  <div>
    <button v-permission="['user']">用户按钮</button> <!-- 当前用户为 user 角色时才显示该按钮 -->
    <button v-permission="['admin']">管理员按钮</button> <!-- 当前用户为 admin 角色时才显示该按钮 -->
  </div>
</template>

<script>
import permission from '../directives/permission'

export default {
  directives: {
    permission
  }
}
</script>

示例说明

示例一：根据角色显示不同的菜单

在网站的侧边栏中，根据当前登录用户的角色显示不同的菜单：

1. 定义菜单的数据结构，将需要显示的菜单项和需要的角色作为其属性；
2. 在侧边栏中根据当前用户的角色筛选出需要显示的菜单项。

以下是示例代码：

// src/components/SidebarMenu.vue

<template>
  <div>
    <ul>
      <li v-for="menu in menus" :key="menu.id">
        <span v-if="menu.roles.indexOf(userRole) !== -1">{{ menu.label }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userRole: localStorage.getItem('userRole'),
      menus: [
        { id: 1, label: '首页', roles: ['user', 'admin'] },
        { id: 2, label: '订单管理', roles: ['admin'] },
        { id: 3, label: '我的订单', roles: ['user'] },
      ]
    }
  }
}
</script>

示例二：隐藏需要权限的按钮

在某个页面中，根据当前登录用户是否有权限，来显示或隐藏一个操作按钮：

1. 在需要权限控制的按钮中使用 v-permission 指令，并传入需要的角色；
2. 在 permission 指令中，判断当前用户是否有该按钮的访问权限。

以下是示例代码：

<!-- src/views/User.vue -->

<template>
  <div>
    <button v-permission="['user']">修改</button>
  </div>
</template>

<script>
import permission from '../directives/permission'

export default {
  directives: {
    permission
  }
}
</script>

// src/directives/permission.js

function checkPermission(el, binding) {
  const { value } = binding; // 获取 v-permission 的值
  const role = localStorage.getItem('userRole'); // 获取当前用户的角色
  if (value && value.indexOf(role) === -1) { // 判断当前用户是否有该组件的访问权限
    el.style.display = 'none'; // 隐藏该按钮
  }
}