vue3 router 登录后根据不同角色访问不同的路由
时间: 2023-08-02 20:15:57 浏览: 44
在Vue3中,可以使用Vue Router来实现根据不同角色访问不同的路由。以下是一个示例:
1. 在router/index.js中定义路由:
```
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import AdminDashboard from '../views/AdminDashboard.vue'
import UserDashboard from '../views/UserDashboard.vue'
import Login from '../views/Login.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/admin',
name: 'AdminDashboard',
component: AdminDashboard,
meta: { requiresAuth: true, isAdmin: true }
},
{
path: '/user',
name: 'UserDashboard',
component: UserDashboard,
meta: { requiresAuth: true, isUser: true }
},
{
path: '/login',
name: 'Login',
component: Login
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
```
2. 在App.vue中使用路由:
```
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
import { ref } from 'vue'
import router from './router'
export default {
name: 'App',
setup() {
const isAuthenticated = ref(false)
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!isAuthenticated.value) {
next('/login')
} else {
if (to.matched.some(record => record.meta.isAdmin) && !isAdmin.value) {
next('/')
} else if (to.matched.some(record => record.meta.isUser) && isAdmin.value) {
next('/')
} else {
next()
}
}
} else {
next()
}
})
return { isAuthenticated }
}
}
</script>
```
3. 在Login.vue中设置登录逻辑,并更新isAuthenticated和isAdmin的值:
```
<template>
<div>
<h1>Login</h1>
<button @click="loginAsAdmin">Login as Admin</button>
<button @click="loginAsUser">Login as User</button>
</div>
</template>
<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
export default {
name: 'Login',
setup() {
const isAuthenticated = ref(false)
const isAdmin = ref(false)
const router = useRouter()
const loginAsAdmin = () => {
isAuthenticated.value = true
isAdmin.value = true
router.push('/admin')
}
const loginAsUser = () => {
isAuthenticated.value = true
isAdmin.value = false
router.push('/user')
}
return { isAuthenticated, isAdmin, loginAsAdmin, loginAsUser }
}
}
</script>
```
这样,当用户访问需要登录的路由时,会先检查isAuthenticated的值。如果为false,则跳转到登录页面。登录成功后,会根据isAdmin的值判断用户角色,然后跳转到相应的路由。如果用户角色与路由不匹配,则会跳转到首页。