vue中未登录页面跳转到登录页

主要的实现方式是通过vue-router的路由守卫,可参考代码:

router.beforeEach((to, from, next) => {
    /**
     * 未登录则跳转到登录页
     * 未登录跳转到登录页,也可以通过axios的响应拦截器去实现,但是会先在当前页面渲染一下,再跳转到登录页,会有个闪动的现象
     * 这里通过路由守卫的方式,不会在当前页闪现一下,但是需要在每个路由组件添加一个是否需要登录的标识位,如本项目中的requireAuth字段
     */
    if (to.matched.some((auth) => auth.meta.requireAuth)) {
        let token = localStorage.getItem("token");
        if (token) {
            next();
        } else {
            next({
                path: "/login"
            });
        }
    } else {
        next();
    }
})

需要判断的路由需要添加标识是否需要登录的标识位,也就是加个字段标识一下是否需要登录:

{
    path: '/',
    name: 'Layout',
    component: Layout,
    meta: {
        title: "首页",
        requireAuth: true // 标识该路由是否需要登录
    }
},

除了路由守卫外,也可以通过判断请求的code值来判断,但是那样就有可能会先渲染一下当前页面,然后再跳转到登录页面,有个闪动的效果,体验不好.