Vue 权鉴问题，加载路由时权限模块还没加载怎么破？

[LeeReamond]

如题，我是菜鸡前端，

权鉴 token 储存在 localStorage 里，每次加载 App.vue 时候会跑一段 js 代码将它从 localStorage 拿出来，存到一个 vuex 共享状态里。

然后 vue-router 的部分写了一个拦截器，在开始每次请求之前，判断 vuex 的权限状态，非认证的话有一些路由不给加载。

思路是这么想的，但是实际操作的时候遇到问题是 vue-router 打开一个网页，彼时 vuex 从本地存储里加载 token 的代码还未执行，所以认为是非登录状态，无论如何都会跳转回登录页面。

想问一下前端大佬这种通常解决方案是什么

[lzdyes]

怎么会未执行呢，你初始化 state 的时候就去取持久化的 token 不就行了

const state = {
token: sessionStorage.getItem('token') || ''
}

[abc11]

鉴权不是权鉴

[wunonglin]

你最近问的问题好多。。。

vue 很久没写了，我给你一个 angular 的思路：
首先建立一个 access 的 svr，在 app.module 加入依赖，在 accessSvr 里面初始化 token 或者用户数据。然后在 router guard 里去获取在 accessSvr 的数据，用来判断登录状态和权限之类的，随你发挥，重点是 router guard 而已。

vue 的话原理大概一致，先建立一个 access.module 实现用户数据之类的操作，然后在 vue-router 的 guard 去判断进入路由的时候验证数据，符合就 next()，不符合就 next('/login')即可

那里说的不对望指教。

[LeeReamond]

@wunonglin 对的，是我不理解 js 模块化原理，根据楼上说的解决了，是执行顺序理解不到位造成的，确实可以在 main 里先加载好权限再去 route 进行判断

[LeeReamond]

@lzdyes 大佬，照你说的方法权鉴已经解决了，我有个问题是，你发的代码里 token: sessionStorage.getItem('token') || ''的这个从本地存储中提取的部分，我自己把提取封装了一个工具，放在../plugins/utils.js ，因为里面不光是取出，还要做一些 parse 之类的，大概小几十行代码。

在组件里使用的时候就是 this.$utils.getItem('...')这么写就行了，但是在 vuex 的 index.js 里则要换成 Vue.prototype.$utils.getItem()这种。我在 mutations 里使用这个写法是可以正常调用的，但我发现在 data 部分里这么写会提示 Vue.prototype 里没有$utils 这个东西。这个部分的话如果想模块化用应该怎么导入啊

[Carseason]

用 vuex 的 getters 方法来返回数据不就好了。

[lzdyes]

@LeeReamond 不要为了封装而封装，utils 这种工具类也不是一定非要绑在 vue 上面，你做成模块 export 出来，然后在 vuex 里面 import 进来使用即可