vue3中登录路由拦截
时间: 2023-07-25 10:13:05 浏览: 55
在 Vue3 中,可以使用 Navigation Guards 来实现路由拦截。具体实现步骤如下:
1. 创建一个 `beforeEach` 的 Navigation Guard,在该 Guard 中判断用户是否已经登录。
2. 如果用户已经登录,则直接 `next()` 通过路由拦截。
3. 如果用户未登录,则使用 `next('/login')` 跳转到登录页面。
以下是一个示例代码:
```javascript
// 在 router.js 中引入 beforeEnter Navigation Guard
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: {
requireAuth: true // 添加该字段,表示进入该路由需要登录
}
},
{
path: '/login',
name: 'Login',
component: Login
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if (localStorage.getItem('token')) { // 判断当前用户的登录信息是否存在
next() // 已登录,直接通过
} else {
next({
path: '/login',
query: { redirect: to.fullPath } // 未登录,跳转到登录页
})
}
} else {
next()
}
})
export default router
```
在上述代码中,我们使用 `to.meta.requireAuth` 来判断该路由是否需要登录权限。如果需要,则判断当前用户是否已经登录,如果未登录,则使用 `next('/login')` 来跳转到登录页面。在跳转到登录页面时,我们使用了 `query` 参数来保存当前用户的访问路径,以便在登录成功后可以跳转回该页面。