vue3 userAbilities 示例用法

以下是一个基于Vue 3的用户权限管理示例用法：

1. 定义路由守卫

在路由配置文件中定义守卫函数，如下所示：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import Login from '@/views/Login.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: true } // 添加元数据，表示该路由需要登录才能访问
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: { requiresAuth: true }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token') // 判断用户是否已经登录
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login') // 如果未登录，则跳转到登录页面
  } else {
    next()
  }
})

export default router

在上面的代码中，我们在路由中定义了一个meta元数据，表示该路由需要登录才能访问。然后在beforeEach钩子函数中判断用户是否已经登录，如果未登录，则跳转到登录页面。

2. 定义权限指令

在Vue组件中定义一个自定义指令，如下所示：

import { Directive } from 'vue'

const permissionDirective: Directive = {
  mounted(el, binding) {
    const { value } = binding
    const hasPermission = checkPermission(value) // 判断用户是否有权限
    if (!hasPermission) {
      el.style.display = 'none' // 如果没有权限，则隐藏该组件
    }
  }
}

function checkPermission(permission: string): boolean {
  const userPermissions = localStorage.getItem('permissions') // 从localStorage中获取用户权限信息
  return userPermissions.includes(permission) // 判断用户是否有该权限
}

export default permissionDirective

在上面的代码中，我们定义了一个自定义指令permission，用于根据用户的权限来控制组件的显示或隐藏。在指令的mounted钩子函数中，我们根据传入的权限信息来判断用户是否有该权限，如果没有则隐藏该组件。

3. 实现权限验证

在后端实现用户权限验证，前端通过发送请求来获取用户权限信息，并根据权限信息来控制页面的显示。具体实现方式可以在后端定义一个RESTful API接口，前端通过axios或fetch等工具来发送请求获取用户权限信息，如下所示：

import axios from 'axios'

const getUserPermissions = () => {
  return axios.get('/user/permissions') // 发送请求获取用户权限信息
}

export default getUserPermissions

在获取到用户权限信息后，我们可以将权限信息存储到Vuex或localStorage中，然后在组件中根据权限信息来控制页面的显示。

4. 使用Vuex管理用户权限信息

在Vuex中管理用户的权限信息，根据权限信息来控制页面的显示。具体实现方式可以定义一个state来存储用户权限信息，然后在mutations中定义一个方法来更新state中的权限信息，如下所示：

import { createStore } from 'vuex'
import getUserPermissions from '@/api/user'

const store = createStore({
  state: {
    permissions: []
  },
  mutations: {
    setPermissions(state, payload) {
      state.permissions = payload
    }
  },
  actions: {
    async fetchUserPermissions({ commit }) {
      const { data } = await getUserPermissions() // 发送请求获取用户权限信息
      commit('setPermissions', data.permissions) // 更新state中的权限信息
    }
  }
})

在上面的代码中，我们定义了一个actions方法fetchUserPermissions，用于发送请求获取用户权限信息，并在获取到信息后调用mutations中的setPermissions方法来更新state中的权限信息。然后在组件中使用mapState来获取state中的权限信息，根据权限信息来控制页面的显示。