vue中全局前置守卫beforeEach使用

router.beforeEach((to, from, next) => {
  // to 将要跳转到的路由,
  // from 从哪个路由跳转过来的,
  //next() 不调用此函数将无法正常跳转
})

beforeEach全局前置钩子相当于最外层的保安,来为我们做用户登陆验证保驾护航

router下index.js文件

router.beforeEach(async (to, from, next) => {
 
  const token = localStorage.getItem('token') // 拿到保存在浏览器后端发送来的token **令牌 (通行证)**
  const flag = !!token  // 将token隐试的转换成Boolean值
  const data = await userInfo()  // 这是与后端定义好的 对用户的二次验证 诺返回error === 400 表示你造假登陆
  		// 判断你需要去的路由是否需要登陆验证
  if (to.matched.some((item) => { return item.meta.login })) { 
    if (flag) {
      //

      if (data.error === 400) {
        next('/login') //不合法,重新登陆 并且 强制跳转到登陆注册页面
        return;
      }
      // 到了这里肯定是合法了 不然会被 上边if return 结束下面代码的继续执行
      if (to.name == 'login') {
      	// 如果你合法登陆了但还要去登陆页注册页面 那强制让他去首页
        next('/home')
      } else {
      // 只要你不去 登陆 注册页面想去哪去哪
        next()
      }
      return
    }

    if (!flag && to.name === 'login') {
    // 如果你没token 想去 登陆注册 那可以去吧
      next()
      return
    }
    if (!flag && to.name !== 'login') {
    // 你没登陆还不去注册还想去只能登陆才能看的页面 那想的美强制跳到根页
      next('/')
    }
  } else {
  // 只要你不去需要登陆才能去的页面 想去哪去哪
    next()
    return
  }