vue中未登录页面跳转到登录页
主要的实现方式是通过vue-router的路由守卫,可参考代码:router.beforeEach((to, from, next) => {/*** 未登录则跳转到登录页* 未登录跳转到登录页,也可以通过axios的响应拦截器去实现,但是会先在当前页面渲染一下,再跳转到登录页,会有个闪动的现象* 这里通过路由守卫的方式,不会在当前页闪现一下,但是需要在每个路由组件添加一个是否需要登录的标识
·
主要的实现方式是通过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值来判断,但是那样就有可能会先渲染一下当前页面,然后再跳转到登录页面,有个闪动的效果,体验不好.
更多推荐
已为社区贡献8条内容
所有评论(0)