在 Vue/Vue Router 应用中如何优雅地检测用户登录状态？

[fourstring]

我现在采用的方案是为需要登录后才能访问的路由添加一个 meta.requireLogin 元信息，然后使用 beforeEach 全局导航守卫，且在后端开放一个只返回用户是否登录的 API （检测 session 中的信息），并在 beforeEach 全局导航守卫中请求该 API 之后检测返回结果。（不依靠这种机制来阻止未登录用户访问，后端 API 逻辑有检测用户权限，只是为了当未登录用户访问需要登录路由时自动重定向到登录页面）

我觉得这种方法的主要问题是会重复请求一个后端 API，造成不必要的网络请求浪费，请问是否有可以避免这么多次重复请求的方案呢？谢谢！

[zjwshisb]

在 axios 的拦截器处理就行了，未登录访问需要登录的页面时 api 接口返回 403, axios response 对 403 统一处理

[fourstring]

@zjwshisb #1 那这样实现的话是不是只能用 History API 来重定向了？还能用 Vue Router 吗？

[ochatokori]

@fourstring 我是在 axios 的作用域 new 一个 vue 实例在调用 vue router 的重定向方法，不知道楼下有没有更好的方法

[shintendo]

vuex 里保存当前登录用户信息，路由 beforeEach 里判断这个信息是否存在，若不存在则跳登录页，若存在则直接放行，不考虑登录是否失效的问题，由 axios 的拦截器处理登录失效

[echol]

默认只有未登录的路由，登陆后用 addRoutes 添加，需要的加上单独检测

[shintendo]

@ochatokori 可以在根组件的 created 里面给 axios 加拦截器的吧，这里可以访问 router

[zjwshisb]

@fourstring 可以啊，跟 4 楼的方法差不多，不过是全部交给了 axios 的拦截器，因为要登录的页面必然要请求某些 api，然后在 axios 的拦截器里面跳转登录页，就是会跳转两次页面，不过胜在省事

[zjwshisb]

@fourstring 在 axios 的拦截器里面 import vue-router 一样用的