vue路由导航守卫（控制用户访问权限）

效果演示

官方文档 https://router.vuejs.org/zh/guide/

控制用户访问权限

路由导航守卫

1. 路由导航守卫，所有页面的导航都会进过这里，相当于路由导航的门卫
2. to：即将要进入的目标路由对象
3. from：当前导航正要离开的路由
4. next: 是否允许通过

判断用户是否有登录状态（token），如果没有跳转到登录页，如果有允许跳转到指定页面

router.beforeEach((to, from, next) => {
  const token = window.localStorage.getItem('token')
  // 如果访问的不是登录页面
  if (to.path !== '/login') {
    // 如果有token，允许访问
    if (token) {
      next()
    } else {
      // 如果没有token，跳转到登录页面
      next('/login')
    }
  } else {
    // 如果访问的不是登录页面，也没有token，跳转到登录页面
    next()
  }
})