vue element从0到1之(三)之从login.vue到/dashboard

在上一节当中用户在login.vue页面实现了用户密码的验证，登录并保存了token到cookie当中，然后跳转到"/dashboard" 主页，那我们看在跳转到真正的主页之前，vue到底做了哪些处理。

下面就是具体的代码，路径在src/router/index.js

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title + ' - ' + Config.title
  }
  NProgress.start()
  if (getToken()) {
    // 已登录且要跳转的页面是登录页
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetInfo').then(res => { // 拉取user_info
          // 动态路由，拉取菜单
          loadMenus(next, to)
        }).catch((err) => {
          console.log(err)
          store.dispatch('LogOut').then(() => {
            location.reload() // 为了重新实例化vue-router对象 避免bug
          })
        })
      // 登录时未拉取 菜单，在此处拉取
      } else if (store.getters.loadMenus) {
        // 修改成false，防止死循环
        store.dispatch('updateLoadMenus').then(res => {})
        loadMenus(next, to)
      } else {
        next()
      }
    }
  } else {
    /* has no token*/
    if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
      next()
    } else {
      next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
      NProgress.done()
    }
  }
})

意思是每一个url过来的时候都要经过这样一个拦截。我们看现在我们已经有了token所以getToken()为真，然后if判断，我们现在访问的path是首页即"/dashboard",进入else

此处有一个是否已经获取到角色的判断，在登录的action当中，store/modules/user.js里面我们已经保存了用户角色的信息

可见只要我们的login返回的接口当中的用户数据包含角色信息，那么

这个地方就会顺利的跳过。注意vuex只是在组件之间传递数据，这个地方之所以还能通过store.getters取到role的信息是因为vue是单页应用，不存在我们之前理解的页面跳转，所有的页面跳转其实都是在一个页面完成的，所以我们可以一直使用store里面的数据，除非页面刷新。

好了，一旦确定了存在role信息，就会通过role信息去拉取菜单数据。loadMenus(next,to) 看到了，next参数被再次传入，真正的进入/dashboard是发生在loadMenus里面的。

export const loadMenus = (next, to) => {
  buildMenus().then(menus => {
    var rootMenus = buildTree(menus);
    var res = initMenu(rootMenus);
    console.log(res);
    const asyncRouter = filterAsyncRouter(res)
    asyncRouter.push({path: '*', redirect: '/404', hidden: true})
    store.dispatch('GenerateRoutes', asyncRouter).then(() => { // 存储路由
      router.addRoutes(asyncRouter) // 动态添加可访问路由表
      next({...to, replace: true})
    })
  })
}

loadMenus加载了所有的动态路由信息，也就是我们配置在数据库里面的菜单信息，然后构建动态路由，加入到router当中，最后在组建好所有的路由之后，才真正的路由到/dashboard主页，beforeEach将再次拦截这个url，所以登录之后这个地方虽然只是跳转了一次，但是beforeEach却做了两次拦截操作。

这个next()之后，页面才真正的进入/dashboard