Vue Router 前置守卫拦截 token 过期跳转登录页

token 存在的时候不能可以访问 login 页面

router.beforeEach((to, from, next) => {
    
    // toekn 存在或者没过期
    if (sessionStorage.getItem('token')) {
    
        // token存在的时候不能可以访问login页面
        
        // token 存在或者没过期，即将要进入的是 login 页面
        if (to.path == '/login') {
            
            // 这个 if 里面什么时候会进来，比如说某个人他现在操作页面正常，token 存在或者没过期，但是他喵的，贱嗖的，他现在就要重新登录，你管我，然后就进到这里面来了
        
            next('/home');
            
        // token 存在或者没过期，即将要进入的不是 login 页面
        } else {
        
            // 这个 else 里面什么时候会进来，比如说，当前 token 存在或者没过期，我随便进入到任何一个页面，都可以进来
            
            next();
        }
        
    // token 不存在或者过期了
    } else {
        
        // token 不存在或者过期了，即将要进入的是 login 页面
        if (to.path == '/login') {
            
            // 这个 if 里面什么时候会进来，这里就是正常进来，比如说，当前 token 不存在或者过期了，我直接点击 进入登录页
            
            next();
        
        // token 不存在或者过期了，即将要进入的不是 login 页面
        } else {
        
            // 这个 else 里面什么时候会进来，比如说，A 到 B，那么在进入 B 之前执行 router.beforeEach 前置守卫的时候，token 不存在或者过期了，你就要进入到 C 页面，也就是 login登录页
            
            next('/login');
        }
        
    }
    
});

正常访问 login 页面

router.beforeEach((to, from, next) => {
    
    // toekn 存在或者没过期
    if (localStorage.getItem('token')) {
    
        // 正常操作，正常进入到你想进入的任何页面，如果你想保存你最后的操作页面，可以写在这里边，但是不要把最后的操作页面，写入到 next('lastOpeartionPage')，你就直接保存起来就好
        next();
        
    // token 不存在或者过期了
    } else {
        
        // token 不存在或者过期了，即将要进入的是 login 页面
        if (to.path == '/login') {
            
            // 这个 if 里面什么时候会进来，就是由于下边的 else 语句，当从 A 到 B，在进入 B 之前执行 router.beforeEach 前置守卫的时候，token 不存在或者过期了，即将进入到 C 页面，也就是 login登录页，所以才会判断 to.paht == '/login'
            // 这里你在将保存的最后操作的页面写入到 next('lastOpeartionPage')，或者 next() 进入到 首页，这里就看你怎么判断了
            
            next();
        
        // token 不存在或者过期了，即将要进入的不是 login 页面
        } else {
        
            // 这个 else 里面什么时候会进来，比如说，A 到 B，那么在进入 B 之前执行 router.beforeEach 前置守卫的时候，token 不存在或者过期了，你就要即将进入到 C 页面，也就是 login登录页
            
            next('/login');
        }
        
    }
    
});