vue路由导航守卫的使用

路由导航守卫,顾名思义就是像守卫 一样对路由进行监听判断,验证身份
使用路由导航守卫可以避免用户不进行登陆操作而直接访问到后台界面,
使用方法:
在路由文件中导出路由对象之前添加一个导航守卫,有三个参数,分别是到哪个路由去,从哪个路由来,next跳转

下面代码是判断是否去的是login界面,如果去login界面的话,直接调用next函数放行,如果去其他界面的话,需要验证本地存储中是否有登录成功后生成的token字段,如果有,则表示用户已登录成功,可以进行正常调整,否则表示用户 没有登录进行身份验证,此时调用next(’/login)强制跳转到登陆界面进行登陆

//为路由对象添加foreEach 导航守卫
router.beforeEach((to, from, next) => {
  //如果访问的是登录页面,直接调用next()放行
  if (to.path === '/login') return next()
  const tokenStr = window.sessionStorage.getItem("token")
  //如果没有token,调用next()强制跳转到login页面
  if (!tokenStr) return next('/login')
  next()
})

注意:这里用在路由导出之前添加到路由对象上;并且最后要调用next()函数