Vue-router的导航守卫（前端控制页面跳转或取消，权限控制）

1.什么是vue-router的导航守卫

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。
简单来说就是你希望路由在什么条件跳转，如果不满足就不跳转或者跳转到你指定的路由

2.使用导航守卫
router/index.ts

// 添加路由守卫, 实现权限控制
router.beforeEach((to, from, next) => {
    // 1.如果访问的是注册或者登录, 那么就放行
    if(to.path === '/login' || to.path === '/register'){
        return next();
    }
    // 2.获取当前的登录状态
    const token = sessionStorage.getItem('token');
    // 3.如果访问的是其它路由地址, 那么就需要判断是否已经登录
    //   如果已经登录, 那么就放行, 如果没有登录, 那么就强制跳转到登录界面
    if(!token){
        return next('/login');
    }
    next();
})