时间戳

首页 > 解决方案 > 如何在 vue-resource 中读取存储设置器值？

vuex - 如何在 vue-resource 中读取存储设置器值？

问题描述

在我的 vue/cli 4/vuex/vue-resource 项目中，我使用来自后端 api 的护照从保护区读取数据，如 routes/api.php：

Route::group(['middleware' => 'auth:api',  'prefix' => 'adminarea', 'as' => 'adminarea.'], function ($router) {
    ...
    Route::get('dashboard', 'API\Admin\DashboardController@index');

我找到了如何在 vue-resource 拦截器中为 auth header设置访问令牌

在 src/main.js 我添加了方法：

Vue.http.interceptors.push((request, next) => {   
/*
  console.log('request::')
  console.log(request)

  console.log('this::')
  console.log(this)

  console.log('Vue::')
  console.log(Vue)

  console.log('Vue.$store::')
  console.log(Vue.$store)

  console.log('Vue.$store.getters.token::')
  console.log(Vue.$store.getters.token)
*/

  request.headers.set('Authorization', 'Bearer XXX key')
  request.headers.set('Accept', 'application/json')
  next()
})

如果我手动填写不记名令牌，它对我有用，但我没有找到如何从商店读取它？在我上面的代码中，我未能读取 $store.getters 值...哪种方法有效？

更新块＃1： 如果在 src/main.js 我注释行：

import store from './store'

并添加行：

import store from './store.js';

然后在控制台中我收到错误：

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                           12:55:54 PM

This relative module was not found:

* ./store.js in ./src/main.js

但随着

import store from './store'

我无法访问存储数据

谢谢！

标签： vuexvue-resource

解决方案

尝试导入您的 Vuex 文件，而不是尝试$store通过 Vue 实例访问。

import store from './store.js';

Vue.http.interceptors.push((request, next) => {   
      request.headers.set('Authorization', `Bearer ${store.getters.token}`)
      request.headers.set('Accept', 'application/json')
      next()
})

推荐阅读