vue3 router 权限登录,根据不同的权限访问不同的路由
时间: 2024-01-21 18:16:03 浏览: 22
实现权限路由,可以按照以下步骤进行:
1. 在路由配置文件中定义路由,为每个路由设置一个 meta 属性,用于存储该路由所需要的权限信息。
```
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: {
requiresAuth: true // 需要登录才能访问
}
},
{
path: '/admin',
name: 'Admin',
component: Admin,
meta: {
requiresAuth: true, // 需要登录才能访问
requiresAdmin: true // 需要管理员权限才能访问
}
},
{
path: '/login',
name: 'Login',
component: Login
}
]
```
2. 在路由导航守卫中对每个路由进行权限验证,如果用户没有权限访问该路由,则跳转到登录页面。
```
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
const requiresAdmin = to.matched.some(record => record.meta.requiresAdmin)
const currentUser = firebase.auth().currentUser
if (requiresAuth && !currentUser) {
next('/login')
} else if (requiresAdmin && currentUser && !currentUser.admin) {
next('/')
} else {
next()
}
})
```
3. 在登录成功后,根据用户的权限信息动态生成路由,只有用户有权限访问的路由才会被添加到路由列表中。
```
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/login',
name: 'Login',
component: Login
}
]
})
// 在登录成功后动态生成路由
function generateRoutes(user) {
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: {
requiresAuth: true // 需要登录才能访问
}
}
]
if (user.admin) {
routes.push({
path: '/admin',
name: 'Admin',
component: Admin,
meta: {
requiresAuth: true, // 需要登录才能访问
requiresAdmin: true // 需要管理员权限才能访问
}
})
}
router.addRoutes(routes)
}
```
这样,我们就可以实现根据不同的权限访问不同的路由了。