Question

我正在构建的当前应用程序中有一些陌生的API调用。它需要几个参数来设置以下api。当前基于窗口中的子域，它拾取url参数来创建第一个API调用。之后，我使用Vuex存储存储组织数据的相关信息。

我当前正在尝试设置授权，但不幸的是，由于它位于nuxt.config.js中，因此我无法从vuex存储中动态添加数据。这是我制定的策略的一个示例。我目前正在使用本地默认策略，但不想使url请求动态化：

nuxt.config.js

 /*
   ** Nuxt.js modules
   */
  modules: ['@nuxtjs/axios', '@nuxtjs/auth'],
  /*
   ** Axios configuration
   */
  axios: {
    baseURL: 'https://api.getconflux.com',
    headers: {
      common: {
        Accept: 'application/json, text/plain, */*'
      }
    }
  },
  /*
   ** Auth configuration
   */
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            method: 'post',
            propertyName: 'token'
          },
          logout: {
            url: '/logout',
            method: 'post'
          },
          user: {
            url: '/supporters/me',
            headers: {
              'organization-id': getters.companyId,
              // Authorization Bearer needs to be automatically called from login
            },
            method: 'get',
            propertyName: 'voter'
          },
        }
      }
    },
    customStrategy: {
      user: '~/schemas/user'
    },
    redirect: {
      home: '/'
    }
  }

我手动设置的当前登录名，没有索引页面加载时所称的URL。这是第一个使用所需数据建立状态的api调用，此后我需要为随后的api调用调用此数据。

要使我的身份验证api请求正常工作，尤其是fetchUser()策略中的user调用，我需要从商店中获取companyId getter / state。我不知道该怎么办？

有人知道我如何最好地实现吗？

任何帮助将不胜感激！

谢谢！

Answer 1

您可以在nuxt.config.js文件中禁用用户端点，然后在Vuex中手动调用该端点以获取用户详细信息，然后将其传递给auth NuxtJS模块的setUser方法。因此，在您的nuxt.config.js文件中，您应该具有以下内容：

/*
   ** Nuxt.js modules
   */
  modules: ['@nuxtjs/axios', '@nuxtjs/auth'],
  /*
   ** Axios configuration
   */
  axios: {
    baseURL: 'https://api.getconflux.com',
    headers: {
      common: {
        Accept: 'application/json, text/plain, */*'
      }
    }
  },
  /*
   ** Auth configuration
   */
  auth: {
    strategies: {
      local: {
        endpoints: {
          login: {
            method: 'post',
            propertyName: 'token'
          },
          logout: {
            url: '/logout',
            method: 'post'
          },
          user: false
    },
    customStrategy: {
      user: '~/schemas/user'
    },
    redirect: {
      home: '/'
    }
  }

然后在您的商店中，您有一个动作（或发出API请求以获取用户详细信息的变体）。然后，您按here

所述呼叫setUser

Nuxt身份验证API调用策略

1 个答案: