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 判断用户是否已登录,如果未登录,则跳转到登录页面进行登录。