按钮级的权限控制

目的

根据不同的用户来设置，按钮或组件的隐藏、禁用或删除

实现思路

具体代码

定义全局指令

@/directive/permission.js

import { userInfoStore } from "@/stores/user";

export default {
    mounted(el, bind) {
        const use_userInfoStore = userInfoStore();
        const permissionList = use_userInfoStore.permissionList
        if (!permissionList.includes(bind.value)) {
            el.style.display = "none"
        }
    },
    updated(el, bind) {
        const use_userInfoStore = userInfoStore();
        const permissionList = use_userInfoStore.permissionList
        if (!permissionList.includes(bind.value)) {
            el.style.display = "none"
        }
    }
}

注册全局指令

main.js

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import Permission from './directives/Permission'

const app = createApp(App)

app.directive("auth",Permission) //注册全局指令
app.use(createPinia())
app.use(router)

app.mount('#app')

用户和权限状态管理

@/store/user.js

import { defineStore } from "pinia";
import { ref, computed } from "vue"
export const userInfoStore = defineStore('user',() => {
    const userInfo = ref(JSON.parse(localStorage.getItem("userInfo")) || {})
    const permissionList = ref(localStorage.getItem("permissionList") || [])
    const token = ref(localStorage.getItem("token")||"")
    //获取用户角色
    const getUserRole = computed(() => {
        return userInfo.role
    })
    //设置用户信息
    function setUserInfo(value) {
        localStorage.setItem("userInfo", JSON.stringify(value))
        userInfo.value = value
    }
    //设置权限列表
    function setPermissionList(value) {
        localStorage.setItem("permissionList", JSON.stringify(value))
        permissionList.value = value
    }
    //设置token
    function setToken(value){
        localStorage.setItem("token",value)
        token.value = value
    }
    //删除用户信息
    function delUserInfo(){
        localStorage.removeItem("userInfo")
        userInfo.value = {}
    }
    //删除权限列表
    function delPermissionList(){
        localStorage.removeItem("permissionList")
        permissionList.value = []
    }
    //删除token
    function delToken(){
        localStorage.removeItem("token")
    }
    return {
        userInfo,
        permissionList,
        getUserRole,
        token,
        setUserInfo,
        setPermissionList,
        setToken,
        delUserInfo,
        delPermissionList,
        delToken
    }
})

登录获取用户信息 根据token获取权限

@/views/login/index.vue

<template>
  <div @click="loginFn">登录</div>
</template>

<script setup>
import { userInfoStore } from "@/stores/user";
import { useRouter } from "vue-router";
const use_userInfoStore = userInfoStore();
const router = useRouter();
function loginFn() {
  //模拟登录成功获取用户信息
  const userInfo = {
    username: "wanwu",
    nickname: "xxxx",
    role: "user",
    token:"xxx"
  };
  /*
  管理员的信息
  {
    username: "wanwu123",
    nickname: "xxxx",
    role: "admin",
    token:"kkk"
  };
  */
  use_userInfoStore.setUserInfo(userInfo);
  use_userInfoStore.setToken(userInfo.token)
  //模拟获取权限列表 根据用户token获取权限列表
  const permissionList = [
    "dashboard:view",
    "dashboard:statistics",
    "user:list",
    "user:view",
    "user:create",
    "user:edit",
    "user:delete",
    "user:roleAssign",
    "article:list",
    "article:view",
    "article:create",
    "article:edit",
    "article:delete",
    "article:publish",
    "article:audit",
    "comment:list",
    "comment:edit",
    "comment:delete",
    "comment:audit",
    "system:settings",
    "system:log",
    "system:backup",
  ];
  /*
  管理员的权限
  [
    "dashboard:view",
    "profile:view",
    "profile:edit",
    "article:list",
    "article:view",
    "article:create",
    "article:editOwn",
    "article:deleteOwn",
    "comment:add",
    "comment:editOwn",
    "comment:deleteOwn",
  ];
  
 */
  use_userInfoStore.setPermissionList(permissionList);
  router.replace("/home");
}
</script>

<style>
</style>

功能展示

@/views/home/index.vue

<template>
  <div>
    <div v-auth="'article:create'">创建文章</div>
    <div v-auth="'user:delete'">删除用户</div>
  </div>
</template>

<script setup>

</script>

<style>

</style>

路由规则

@/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import home from "@/views/home/index.vue"
import login from "@/views/login/index.vue"

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path:"/",
      redirect:"/login"
    },
    {
      path:"/login",
      component:login
    },
    {
      path:"/home",
      component:home
    }
  ],
})

export default router

根组件

App.vue

<template>
  <div></div>
  <router-view></router-view>
</template>

<script>

</script>

<style>

</style>