VUE全局路由守卫

VUE全局路由守卫

重点！！！

大项目都会采用，因为需要验证用户是否登录等问题

是什么

在使用vue-router时会进行router跳转，跳转时，我们能对路由进行暂时拦截，进行一系列条件判断（比如用户登录情况，是不是vip用户等），在根据判断进行导航

怎么用

beforeEach

在**@/router/index**下进行配置

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
  //务必调用next(),不使用next，路由会阻塞
}

根据需求

⽤户访问在浏览⽹站时,会访问很多组件,当⽤户跳转
到 /personalcenter,发现⽤户没有登录,此时应该让⽤户登录才能查看,应该让⽤户跳转到登录⻚⾯,登录完成之后才可以查看个人中心的内容,这个时候全局守卫起到了关键的作⽤

使用配置

const router = new VueRouter({
routes:[
{
path: '/personalcenter',
name: 'personalcenter',
component: () => import('@/views/Personalcenter')
},
{
path: "/login",
name: "login",
component: () => import('@/views/Login')
},
  ]
})
// 全局守卫
router.beforeEach((to, from, next) => {
//⽤户访问的是'/notes'
if (to.path === '/personalcenter') {
//查看⼀下⽤户是否保存了登录状态信息
let user =JSON.parse(localStorage.getItem('user'))
if (user) {
//如果有,直接放⾏
next();
} else {
//如果没有,⽤户跳转登录⻚⾯登录
next('/login')
}
} else {
next();
}
})

这时候，在访问进入个人中心，如果没有登录的情况下，会自动跳转到登录页，如果已经登录就跳转到个人中心。

小结

这里进行的判断主要是通过localstorage里是否有user进行判定的，但是没有向后端发起验证是否有这个用户存在，以及用户名密码是否正确，这也是应该补足的