vue3权限的设置

Vue 3 中可以使用 Vue Router 和 Vuex 来实现权限控制。

首先，对于路由的权限控制，我们可以在路由定义时，设置 meta 属性，用于存储该路由的权限信息。例如，我们可以在 router.js 中定义一个路由数组：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import Login from './views/Login.vue'
import Dashboard from './views/Dashboard.vue'
 const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: { requiresAuth: false }
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
    meta: { requiresAuth: false }
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    meta: { requiresAuth: true }
  }
]
 const router = createRouter({
  history: createWebHistory(),
  routes
})
 export default router

在 meta 中我们可以设置 requiresAuth 属性，用于标识该路由是否需要登录权限，如果需要登录权限则设置为 true，否则设置为 false。

接下来，在路由跳转时，我们可以监听路由变化事件，通过判断该路由是否需要登录权限，来进行权限控制。例如，在 main.js 中添加以下代码：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
 router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !localStorage.getItem('token')) {
    // 跳转到登录页面，进行登录
    next('/login')
  } else {
    next()
  }
})
 createApp(App).use(router).mount('#app')

在 beforeEach 中，我们可以通过 to.meta.requiresAuth 判断该路由是否需要登录权限，如果需要登录权限且用户未登录，则跳转到登录页面进行登录，否则允许访问该路由。

此外，对于 Vuex 的权限控制，我们可以在 store.js 中定义一个 state 属性，用于存储用户信息和权限信息，例如：

import { createStore } from 'vuex'

const store = createStore({
  state: {
    user: null,
    permissions: [],
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
    setPermissions(state, permissions) {
      state.permissions = permissions
    }
  }
})

export default store

在 mutations 中，我们可以定义 setUser 和 setPermissions 方法，用于设置用户信息和权限信息。在需要进行权限控制的组件中，我们可以使用 $store.state.permissions 判断当前用户是否具有某个权限，例如：

<template>
  <div>
    <h1>Dashboard</h1>
    <div v-if="$store.state.permissions.includes('view-dashboard')">可以访问 Dashboard</div>
    <div v-else>无权访问 Dashboard</div>
  </div>
</template>
 <script>
export default {
  name: 'Dashboard',
  mounted() {
    if (!this.$store.state.user) {
      // 未登录，跳转到登录页面
      this.$router.push('/login')
    }
  }
}
</script>

在组件中，我们可以使用 $store.state.user 判断用户是否已登录，如果未登录，则跳转到登录页面进行登录。