vue2 全局前置守卫验证登录案例

import store from '@/store';
import router from '@/router';
//未登录不能去的路由:交易页、支付、支付成功、个人中心
//白名单
let whiteList = ["/trade", '/pay', '/paysuccess', '/center', '/center/myorder', '/center/teamorder'];
//全局守卫：前置守卫
router.beforeEach(async (to, from, next) => {
    //to:你想要跳转过去的路由
    //from:你从那个路由而来
    //next:其实是一个函数【放行函数】  放行函数有几种写法:next()   A->B next           next('/detail') 指定跳转到某一个路由
    let hasToken = store.state.user.token;
    let hasNickName = store.state.user.nickName;
    //用户登陆了
    if (hasToken) {
        //如果登录了,还想去登录页->跳转到home
        if (to.path == '/login' || to.path == '/register') {
            next('/home');
        } else {
            //登录成功:想去home|注册|search|detail|shopcart
            //假如登陆了:想去home|注册|search|detail|shopcart->还有用户名字->放行
            if (hasNickName) {
                next();
            } else {
                try {
                    //假如登陆了:想去home|注册|search|detail|shopcart->没有用户名自发请求获取到->放行
                    await store.dispatch('user/getUserInfo');
                    next();
                } catch (error) {
                    //token获取获取不到用户信息:怎么处理
                    await store.dispatch('user/logout');
                    next('/login');
                }
            }

        }
    } else {
        //用户未登录----放行 ||未登录的情况暂时不考虑
        let toPath = to.path;
        if (whiteList.indexOf(toPath) != -1) {
            //用户未登录:把他曾经想去的地方，作为query参数，注入到地址栏当中
            //任意VC都可以获取到！！！
            next('/login?redirect=' + toPath)
        } else {
            next();
        }

    }
});