面试题：Vue中Pinia在用户权限管理场景的应用

Question

在一个Vue项目中进行用户权限管理，比如不同角色用户看到不同的菜单和操作按钮。请描述如何使用Pinia来实现这一场景，包括状态定义、actions操作以及如何在组件中调用。

Answer 1

1. 状态定义： 在Pinia的store中定义用户角色及对应的权限相关状态。例如：

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    userRole: null, // 用户角色，如 'admin', 'user' 等
    menuPermissions: {}, // 菜单权限，例如 { 'dashboard': true, 'userList': false }
    buttonPermissions: {} // 按钮权限，例如 { 'deleteUser': false, 'editUser': true }
  })
})

2. actions操作：

• 设置用户角色和权限：

actions: {
  setUserRole(role) {
    this.userRole = role
    // 根据不同角色设置菜单和按钮权限
    if (role === 'admin') {
      this.menuPermissions = {
        'dashboard': true,
        'userList': true,
        // 更多菜单权限
      }
      this.buttonPermissions = {
        'deleteUser': true,
        'editUser': true,
        // 更多按钮权限
      }
    } else if (role === 'user') {
      this.menuPermissions = {
        'dashboard': true,
        'userList': false
      }
      this.buttonPermissions = {
        'deleteUser': false,
        'editUser': false
      }
    }
  }
}

3. 在组件中调用：

• 引入store：

<script setup>
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
</script>

• 根据权限控制菜单显示：

<template>
  <div>
    <ul>
      <li v-if="userStore.menuPermissions.dashboard">Dashboard</li>
      <li v-if="userStore.menuPermissions.userList">User List</li>
    </ul>
  </div>
</template>

• 根据权限控制按钮显示：

<template>
  <div>
    <button v-if="userStore.buttonPermissions.deleteUser">Delete User</button>
    <button v-if="userStore.buttonPermissions.editUser">Edit User</button>
  </div>
</template>

在组件创建或用户登录后，调用 userStore.setUserRole(role) 方法来设置用户角色及对应的权限，从而实现不同角色看到不同的菜单和操作按钮。