Vue3权限控制全攻略：路由与组件层面的用户角色与权限管理方法深度解析

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
  }
})

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

<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>

<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>

<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>

<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>