这是一个创建于 1701 天前的主题，其中的信息可能已经有所发展或是发生改变。
如题，我是菜鸡前端，
权鉴 token 储存在 localStorage 里，每次加载 App.vue 时候会跑一段 js 代码将它从 localStorage 拿出来，存到一个 vuex 共享状态里。
然后 vue-router 的部分写了一个拦截器，在开始每次请求之前，判断 vuex 的权限状态，非认证的话有一些路由不给加载。
思路是这么想的，但是实际操作的时候遇到问题是 vue-router 打开一个网页，彼时 vuex 从本地存储里加载 token 的代码还未执行，所以认为是非登录状态，无论如何都会跳转回登录页面。
想问一下前端大佬这种通常解决方案是什么
7 条回复 2021-02-14 12:36:50 +08:00
 | 1 lzdyes 2021-02-14 00:43:00 +08:00 怎么会未执行呢，你初始化 state 的时候就去取持久化的 token 不就行了 const state = { token: sessionStorage.getItem('token') || '' } |
 | 2 abc11 2021-02-14 00:51:38 +08:00 via Android 鉴权不是权鉴 |
 | 3 shakaraka PRO 你最近问的问题好多。。。 vue 很久没写了，我给你一个 angular 的思路： 首先建立一个 access 的 svr，在 app.module 加入依赖，在 accessSvr 里面初始化 token 或者用户数据。然后在 router guard 里去获取在 accessSvr 的数据，用来判断登录状态和权限之类的，随你发挥，重点是 router guard 而已。 vue 的话原理大概一致，先建立一个 access.module 实现用户数据之类的操作，然后在 vue-router 的 guard 去判断进入路由的时候验证数据，符合就 next()，不符合就 next('/login')即可 那里说的不对望指教。 |
 | 4 LeeReamond OP @wunonglin 对的，是我不理解 js 模块化原理，根据楼上说的解决了，是执行顺序理解不到位造成的，确实可以在 main 里先加载好权限再去 route 进行判断 |
| 5 LeeReamond OP @lzdyes 大佬，照你说的方法权鉴已经解决了，我有个问题是，你发的代码里 token: sessionStorage.getItem('token') || ''的这个从本地存储中提取的部分，我自己把提取封装了一个工具，放在../plugins/utils.js ，因为里面不光是取出，还要做一些 parse 之类的，大概小几十行代码。 在组件里使用的时候就是 this.$utils.getItem('...')这么写就行了，但是在 vuex 的 index.js 里则要换成 Vue.prototype.$utils.getItem()这种。我在 mutations 里使用这个写法是可以正常调用的，但我发现在 data 部分里这么写会提示 Vue.prototype 里没有$utils 这个东西。这个部分的话如果想模块化用应该怎么导入啊 |
 | 6 Carseason 2021-02-14 03:35:54 +08:00 via Android  1 用 vuex 的 getters 方法来返回数据不就好了。 |
| 7 lzdyes 2021-02-14 12:36:50 +08:00 @LeeReamond 不要为了封装而封装，utils 这种工具类也不是一定非要绑在 vue 上面，你做成模块 export 出来，然后在 vuex 里面 import 进来使用即可 |
Select Language