vue3中基于路由层面和组件层面进行用户角色及权限控制的方法解析

文章目录

- - 一、权限控制
  - 二、路由层面控制
  - 三、组件层面控制
  - - 1、使用自定义指令
    - 2、使用方法控制
    - 3、封装一个权限控制组件来实现组件层面控制权限
    - - 3.1、组件页面 Authority.vue
      - 3.2、使用页面 app.vue
      - 3.3、效果预览

一、权限控制

随着前端技术的不断发展，越来越多的前端框架被使用在 Web 应用程序中，其中尤为出色的一个就是 Vue。Vue 是一个易于理解并且使用方便的框架，它被广泛地应用于 Web 应用程序的开发中。在大多数 Web 应用程序中，权限控制是至关重要的一部分，如何在 Vue 中进行权限控制就成为了一个十分关键的问题。

权限控制是一个很重要的概念，在 Web 应用程序中尤其重要。简单地说，权限控制就是将用户分为不同的分类，为每个分类分配相应的用户权限。这样，用户就只能访问他们所允许的内容了。权限控制可以提高应用程序的安全性和稳定性，使数据更加安全可靠。

在 Vue 中进行权限控制，通常有两种方式：第一种是在路由层面进行控制，第二种是在组件层面进行控制。

用户登录后该用户的角色与权限信息会一同返回给前端，前端将这些信息存储到状态管理里备用即可。

这里使用pinia存储当前用户的角色及权限。你可以根据实际情况进行相应的调整。
store/index.js

import { defineStore } from 'pinia'
import { ref } from 'vue';export const userPermissionsStore = defineStore('userPermissions', () => {// 角色const roles = ref('admin')// 权限const userPermissions = ref([])//是否登录const isLogin = ref(false)// 设置状态（传入的权限信息赋值给该状态）const setUserPermissions = (params) => {userPermissions.value = params}return {isLogin,userPermissions,roles,setUserPermissions}
})

二、路由层面控制

在路由层面进行控制，可以在路由的元数据 meta 中设置用户权限，然后可以在路由守卫函数中进行校验。如果当前用户的权限符合该路由的要求，则策略继续进行，否则将导航到其他页面。

路由的元数据 meta 中设置了 requireAuth 和 roles 两个属性，requireAuth 表示该路由需要用户登录才能访问，roles 表示受访问限制的角色。可以在 beforeEach 路由守卫函数中校验用户权限，如果用户有访问该路由的权限，则进入页面，否则跳转到其他页面。这样，就可以在路由层面进行权限控制了。

import { createRouter, createWebHashHistory } from 'vue-router'
import { userPermissionsStore } from '@/store/index'
import { storeToRefs } from 'pinia'let routes = [{path: '/home', // 路径name: 'home', // 路由名称component: () => import('../views/home.vue'),meta: {requireAuth: true, // 需要用户权限roles: ['admin', 'guest'] // 受访问限制的角色}
}, {path: '/login', name: 'login', component: () => import('../views/login.vue')
}, {path: '/denied', name: 'denied', component: () => import('../views/denied.vue')
}]const router = createRouter({history: createWebHashHistory(),routes
})// 添加路由前置守卫
router.beforeEach((to, from, next) => {const store = userPermissionsStore()// 获取当前登录状态及用户角色const { isLogin, roles } = storeToRefs(store)// 判断该路由是否需要登录权限if (to.meta.requireAuth) {// 如果需要，则校验用户是否已经登录if (isLogin.value) {// 判断当前用户是否有访问该路由的权限if (to.meta.roles.includes(roles.value)) {next() // 用户有访问权限，直接进入页面} else {next('/denied') // 跳转到其他页面}} else {// 如果用户未登录，则跳转到登录页面next('/login')}} else {next() // 如果不需要登录权限，直接进入页面}
});export default router

三、组件层面控制

1、使用自定义指令

可以利用 Vue 的指令来控制组件的显示和隐藏。例如，可以为每个组件设置一个权限属性，然后在指令中判断当前用户是否有访问该组件的权限，如果有，则显示组件，否则隐藏组件。利用 v-if 指令来判断当前用户是否有访问该组件的权限，并根据权限设置组件的显示和隐藏。

<template> <el-button type="success" plain v-permission="'sys:user:add'">添加用户1</el-button>
</template> <script setup> 
import { userPermissionsStore } from '@/store/index'
import { storeToRefs } from 'pinia'
const store = userPermissionsStore()
const { userPermissions } = storeToRefs(store)const vPermission = {mounted(el, binding) {const requiredPermission = binding.value;if (!userPermissions.value.includes(requiredPermission)) {el.style.display = 'none';}}
} 
</script>

2、使用方法控制

<template> <el-button type="primary" plain v-if="hasPermission('sys:user:add')">添加用户1</el-button>
</template> <script setup> 
import { userPermissionsStore } from '@/store/index'
import { storeToRefs } from 'pinia'
const store = userPermissionsStore()
const { userPermissions } = storeToRefs(store)const hasPermission = (permission) => {return userPermissions.value.includes(permission);
}
</script>

3、封装一个权限控制组件来实现组件层面控制权限

3.1、组件页面 Authority.vue

<template><slot v-if="showSlot" :userPermissions="userPermissions"></slot>
</template><script setup>
import { computed } from 'vue';import { storeToRefs } from 'pinia'
import { userPermissionsStore } from '@/store/index'
const store = userPermissionsStore()
// 为了从 store 中提取属性时保持其响应性，你需要使用 storeToRefs()
const { userPermissions } = storeToRefs(store)const props = defineProps({// 需要的权限permissions: {type: [String, Array]}
});const showSlot = computed(() => {if (!props.permissions) {return true}if (!userPermissions.value) {return false}if (Array.isArray(props.permissions)) {return props.permissions.every(p => {return userPermissions.value.includes(p)})} else {return userPermissions.value.includes(props.permissions)}
})</script><style scoped>
</style>

3.2、使用页面 app.vue

<template><el-select v-model="value" placeholder="请选择" @change="change" style="width: 300px; margin: 20px 0;"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /></el-select><div><!-- 这里可以根据返回的权限，做自己想判断的事情 --><Authority><template #default="{ userPermissions }"><el-button :disabled="!userPermissions.includes('sys:user:delete')" type="primary">禁用用户1</el-button></template></Authority><!-- 传入组件所需要的权限 --><Authority permissions="sys:user:view"><el-button>查询用户2</el-button></Authority><Authority permissions="sys:user:update"><el-button type="success">修改用户3</el-button></Authority><Authority permissions="sys:user:delete"><el-button type="info">删除用户4</el-button></Authority><Authority permissions="sys:user:add"><el-button type="warning">添加用户5</el-button></Authority><Authority :permissions="['sys:user:update', 'sys:user:delete']"><el-button type="danger">禁用用户6</el-button></Authority></div>
</template><script setup>
import Authority from '@/components/Authority.vue'
import { ref } from 'vue'const value = ref('')
const options = [{value: '0',label: 'admin',permissions: ["sys:user:view", "sys:user:update", "sys:user:delete", "sys:user:add"]
}, {value: '1',label: 'editor',permissions: ["sys:user:view", "sys:user:update", "sys:user:add"]
}, {value: '2',label: 'guest',permissions: ["sys:user:view"]
}]import { userPermissionsStore } from '@/store/index'
const store = userPermissionsStore()
// 作为 action 的 setUserPermissions 可以直接解构
const { setUserPermissions } = store
const change = (e) => {setUserPermissions(options[e].permissions)
}</script><style scoped>
</style>