这是一个创建于 2553 天前的主题，其中的信息可能已经有所发展或是发生改变。
我现在采用的方案是为需要登录后才能访问的路由添加一个 meta.requireLogin 元信息，然后使用 beforeEach 全局导航守卫，且在后端开放一个只返回用户是否登录的 API （检测 session 中的信息），并在 beforeEach 全局导航守卫中请求该 API 之后检测返回结果。（不依靠这种机制来阻止未登录用户访问，后端 API 逻辑有检测用户权限，只是为了当未登录用户访问需要登录路由时自动重定向到登录页面）
我觉得这种方法的主要问题是会重复请求一个后端 API，造成不必要的网络请求浪费，请问是否有可以避免这么多次重复请求的方案呢？谢谢！
 | 1 zjwshisb 2018-12-21 16:32:20 +08:00  1 在 axios 的拦截器处理就行了，未登录访问需要登录的页面时 api 接口返回 403, axios response 对 403 统一处理 |
 | 2 fourstring OP @zjwshisb #1 那这样实现的话是不是只能用 History API 来重定向了？还能用 Vue Router 吗？ |
 | 3 ochatokori 2018-12-21 16:41:53 +08:00 via Android 1 @fourstring 我是在 axios 的作用域 new 一个 vue 实例在调用 vue router 的重定向方法，不知道楼下有没有更好的方法 |
 | 4 shintendo 2018-12-21 16:44:32 +08:00 1 vuex 里保存当前登录用户信息，路由 beforeEach 里判断这个信息是否存在，若不存在则跳登录页，若存在则直接放行，不考虑登录是否失效的问题，由 axios 的拦截器处理登录失效 |
 | 5 echol 2018-12-21 16:46:49 +08:00 1 默认只有未登录的路由，登陆后用 addRoutes 添加，需要的加上单独检测 |
| 6 shintendo 2018-12-21 16:49:20 +08:00 2 @ochatokori 可以在根组件的 created 里面给 axios 加拦截器的吧，这里可以访问 router |
| 7 zjwshisb 2018-12-21 16:49:40 +08:00 1 @fourstring 可以啊，跟 4 楼的方法差不多，不过是全部交给了 axios 的拦截器，因为要登录的页面必然要请求某些 api，然后在 axios 的拦截器里面跳转登录页，就是会跳转两次页面，不过胜在省事 |
| 8 zjwshisb 2018-12-21 16:51:24 +08:00 1 @fourstring 在 axios 的拦截器里面 import vue-router 一样用的 |
Select Language