全局路由守卫的应用

前置路由守卫 router.beforeEach

判断页面是否需要登录

1 在路由中设置meta isToken用来判断是否需要登录才能进入的页面

{
    path: '/login',
    name: 'login',
    component: () => import('../views/Login.vue'),
    meta: {
      title: '登录',
      isToken: false
    },
  },

2 前置守卫判断

router.beforeEach((to, from, next) => {
 // 获取token
  let token = localStorage.getItem('token')
  if (token && token != 'null') {  //有token  放行
    next()
  } else {
   // 判断该页面是否需要登录
    if (to.meta.isToken) {  //为true 表示需登录才能进入的页面
      Toast('请先登录');
   // 返回登录页面
      next('/login')
    } else {
      next()
    }
  }
})

后置路由钩子 router.afterEach

设置动态的title

1 如上图，设置meta里的title属性

meta: {
      title: '登录',
      isToken: false
    },

2 后置路由守卫设置

router.afterEach((to, from, next) => {
  document.getElementById('titleId').innerHTML = to.meta.title
})

全局解析守卫 router.beforeResolve

 在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用