这是一个创建于 2506 天前的主题，其中的信息可能已经有所发展或是发生改变。
我现在采用的方案是为需要登录后才能访问的路由添加一个 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