面试题：Vuex在复杂单页应用权限管理中的实践

在Vuex中定义权限相关的状态

定义角色与权限状态：在state中定义当前用户角色和对应权限。例如：

const state = {
  userRole: null, // 初始用户角色为null，代表未登录
  permissions: {} // 存储用户权限，如 {adminPage: true, editContent: false}
}

定义权限映射：在constants文件中定义角色和权限的映射关系，便于管理和维护。

// constants.js
export const ROLES = {
  ADMIN: 'admin',
  USER: 'user',
  GUEST: 'guest'
}

export const PERMISSIONS = {
  ADMIN_PAGE: 'adminPage',
  EDIT_CONTENT: 'editContent'
}

export const ROLE_PERMISSIONS = {
  [ROLES.ADMIN]: {
    [PERMISSIONS.ADMIN_PAGE]: true,
    [PERMISSIONS.EDIT_CONTENT]: true
  },
  [ROLES.USER]: {
    [PERMISSIONS.ADMIN_PAGE]: false,
    [PERMISSIONS.EDIT_CONTENT]: true
  },
  [ROLES.GUEST]: {
    [PERMISSIONS.ADMIN_PAGE]: false,
    [PERMISSIONS.EDIT_CONTENT]: false
  }
}

根据用户登录状态动态更新权限状态

登录时更新权限：在登录逻辑（如actions中的login方法）中，根据登录返回的用户角色，更新userRole和permissions。

import { ROLES, PERMISSIONS, ROLE_PERMISSIONS } from '@/constants'

const actions = {
  async login({ commit }, userInfo) {
    // 假设userInfo.role为登录返回的用户角色
    const role = userInfo.role
    commit('SET_USER_ROLE', role)
    commit('SET_PERMISSIONS', ROLE_PERMISSIONS[role])
  }
}

const mutations = {
  SET_USER_ROLE(state, role) {
    state.userRole = role
  },
  SET_PERMISSIONS(state, permissions) {
    state.permissions = permissions
  }
}

登出时重置权限：在登出逻辑（如actions中的logout方法）中，重置userRole和permissions。

const actions = {
  async logout({ commit }) {
    commit('SET_USER_ROLE', null)
    commit('SET_PERMISSIONS', {})
  }
}

在组件中基于Vuex的权限状态进行条件渲染和操作限制

条件渲染：在模板中使用v-if指令结合Vuex的权限状态进行页面元素的条件渲染。

<template>
  <div>
    <template v-if="$store.state.permissions[PERMISSIONS.ADMIN_PAGE]">
      <h1>这是管理员页面</h1>
    </template>
  </div>
</template>

<script>
import { PERMISSIONS } from '@/constants'
export default {
  name: 'MyComponent'
}
</script>

操作限制：在方法中检查权限后执行相应操作。

<template>
  <div>
    <button @click="handleEdit" :disabled="!$store.state.permissions[PERMISSIONS.EDIT_CONTENT]">编辑内容</button>
  </div>
</template>

<script>
import { PERMISSIONS } from '@/constants'
export default {
  name: 'MyComponent',
  methods: {
    handleEdit() {
      if (this.$store.state.permissions[PERMISSIONS.EDIT_CONTENT]) {
        // 执行编辑操作
        console.log('执行编辑操作')
      } else {
        console.log('没有编辑权限')
      }
    }
  }
}
</script>

面试题：Vuex在复杂单页应用权限管理中的实践

知识考点

面试题答案

在Vuex中定义权限相关的状态

根据用户登录状态动态更新权限状态

在组件中基于Vuex的权限状态进行条件渲染和操作限制