router.beforeEach实现路由判断页面未登录跳转到登录页面(路由拦截)

项目中需要有些页面的接口需要用到token,而token是登录接口返回存在cookie里面的.肯定没有登录前这些接口是不能发送的.所以需要做一个登录拦截.在每一个页面去判断是不是有cookie的存在比较的麻烦,查(chao)了(xi)下百度,将自己做的代码记录下:
1:在main.js全局文件中判断cookie中是否存在token,存在就按照正常的页面跳转,不存在就跳转到登录界面:
使用了mint-ui中的message-box来提示用户是否跳转到登录界面.

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requireAuth)) { // 判断该路由是否需要登录权限
        if (getCookie('userCookie')) { // 判断当前的token是否存在
            // console.log("router.beforeEach进入了");
            next();
        } else {
            MessageBox({
                title: '温馨提示',
                message: '您没有登录,请立即登录',
                showCancelButton: true
            }).then(action => {
                if (action == 'confirm') {
                    next({
                        path: '/login',
                        query: {
                            redirect: to.fullPath
                        } // 将跳转的路由path作为参数，登录成功后跳转到该路由
                    })
                }
            });
        }
    } else {
        next();
    }
});

2:在路由文件中,配置路由:
哪个路由跳转前需要登录的,配置下meta下的requireAuth的为true就ok了.

{
            path: "/withdrawal",//提现
            name : "withdrawal",
            component : Withdrawal,
            meta: {
                title: '',
                requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
              },
        },

3:router.beforeEach的理解:
没(bu)有(xiang)时(xie)间(le),回去再来写啦~~~