后台管理系统的前置路由守卫

// 全局前置路由守卫
/**
 * 是否登录了
 * 登录了
 * 去的是否是登录页面
 * **** 是的   则转到系统首页  ---- 都登录过了 还去登录干啥
 * **** 不是去的登录页  放行去登录页
 */

/**
 * 未登录
 * 去的是否是白名单 ？ 白名单就是未登录的情况下 你可以访问哪些界面 【登录页面 404页面】
 * **** 在白名单 放行
 * **** 不在白名单 非法访问  拦截去登录页面
 */
// 导航守卫的逻辑
router.beforeEach(async (to, from, next) => {
  console.log(getToken()) // undefined
  if (getToken()) {
    console.log('登录了')
    // 去的是否是登录页
    if (to.path === '/login') {
      //   console.log('去的是登录页,登录了去的还是登录页 重复了 去系统首页')
      next('/')
    } else {
      //   console.log('去的不是登录页，放行 该去哪就去哪，没有限制了')
      // 登录了 跳转的是系统页 layout 就获取用户资料
      console.log('vuex的监视属性 userId')
      //   console.log(store.state.userInfo)
      //   await store.dispatch('getUserProfileAction')
      //   console.log(store.state.userInfo)
      //   console.log(store.getters.userId) // undefined
      // 为什么使用你 getters ???  老师要使用的
      //   if (!store.getters.userId) {
      //     console.log('获取用户资料')
      //     // 调用 vuex 的action的方法 然后在 actions 中再次调用 mutations的方法
      //     // ps：使用了await 则此函数前面要使用  async
      //     // await store.dispatch('getUserProfileAction')
      //   }
      next()
    }
    next()
  } else {
    console.log('未登录')
    // // 去的是否是白色名单 白名单数组
    // 没有登录的状态下只能去这 2 个页面
    const whiteList = ['/404', '/login']
    if (whiteList.includes(to.path)) {
      //   console.log('包含白色名单')
      // 放行
      next()
    } else {
      // 不在白色名单 就是非法访问了 拦截去登录页面
      next('/login')
    }
    // next()
  }
})