vue如何使用路由拦截器
beforeEach 方法会在每个路由切换前,对路由进行拦截处理。可以在这个方法中进行一些验证或者权限认证,如果满足条件则继续跳转,否则取消跳转并进行相应处理。在这个示例中,使用了 localStorage 来保存用户的 token 信息,用于验证用户是否已登录。如果用户未登录,但是又尝试访问其他需要登录的页面,则会被重定向到登录页面。如果用户已登录,则自动跳转到访问的页面。需要注意的是,befo
·
在 Vue 中使用路由拦截器需要使用 Vue Router 提供的 beforeEach 方法。beforeEach 方法会在每个路由切换前,对路由进行拦截处理。可以在这个方法中进行一些验证或者权限认证,如果满足条件则继续跳转,否则取消跳转并进行相应处理。
下面是一个示例:
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/views/Login.vue'
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/dashboard',
name: 'dashboard',
component: Dashboard
},
{
path: '/login',
name: 'login',
component: Login
}
]
})
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.name !== 'login' && !isAuthenticated) {
next({ name: 'login' })
} else {
next()
}
})
export default router
在这个示例中,使用了 localStorage 来保存用户的 token 信息,用于验证用户是否已登录。如果用户未登录,但是又尝试访问其他需要登录的页面,则会被重定向到登录页面。如果用户已登录,则自动跳转到访问的页面。
需要注意的是,beforeEach 方法是在路由切换前执行的,因此在其中异步操作需要使用 Promise 来处理。
更多推荐
已为社区贡献2条内容
所有评论(0)