vue-router登录状态检测?

一共3个页面,默认指向login页面,登陆后存储client_id到cookie和global.CLIENT_ID

我想做的是登录状态检测,页面跳转时检查global.CLIENT_ID或者cookie,不存在就跳转到login页面去。

// 路由页面
import main from './components/main/main.vue';
import star from './components/star/star.vue';
import login from './components/login/login.vue';


// 路由配置
const routes = [
    {
        name: 'main',
        path: '/main',
        component: main,
        // meta: {
        //     login_required: true
        // }
    },
    {
        name: 'star',
        path: '/star',
        component: star,
        // meta: {
        //     login_required: true
        // }
    },

    {
        name: 'login',
        path: '/login',
        component: login,
        // meta: {
        //     login_required: false
        // }
    },
    {
        path: '/',
        redirect: '/login'
    }
];

const router = new VueRouter({
    routes: routes
});

new Vue({
    el: '#app',
    components: {App},
    template: '<App/>',
    router: router
})

我百度了一下相关的问题,有人说可以用router钩子,可我试了一下

router.beforeEach(function (to, from, next) {
    if(to.name === 'main' || to.name === 'star'){
        next('/login');
    }

    else{
        next();
    }

});

即使是这样,也会存在两个问题:
1、如果直接在浏览器地址栏输入http://localhost/:8080/#/main,可以直接略过逻辑访问到main
2、当前页面是main,点击一次star会跳转到login,但再次点击star,就会跳转到star.

我也尝试在main.js中watch global.CLIENT_ID,但报错说递归太多。

请给我一个思路,或者相关代码,谢谢。

回答:

看了楼主的题目我来打一个马后炮。

这是vue-router对于导航守卫的描述

clipboard.png

由此可见 beforeEach/afterEach 这样的守卫确实不会在初次进入的时候触发,那么怎么办呢?

答案是 router.onReady 方法

clipboard.png

这个我在自己项目中是如此解决的,至于登录状态,建议的是使用 vuex 的 state 去保存。

回答:

在路由拦截中写是正确的,往下的思路你没想透
如果要去的登陆页,不判断有无本地信息
如果去的是其它页面,有本地登陆信息且未超时过,否则转登陆页
show my code

    if(to.name==="login"){
        next();
    }else{
        if(loginInfo){
            // 这里要加一个有登陆信息比对时间
            next()
        }else{
            next("login")
        }
    }

另一个大佬的回答,供参考:
https://segmentfault.com/q/10…

回答:

if (to.name === 'login') {
  next('/login')
}
if (global.CLIENT_ID) {
  next()
} else {
  next('/login')
}

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注