主要的实现方式是通过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值来判断,但是那样就有可能会先渲染一下当前页面,然后再跳转到登录页面,有个闪动的效果,体验不好.
