时间戳

首页 > 解决方案 > Nuxt Authentication API 调用策略

vue.js - Nuxt Authentication API 调用策略

问题描述

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

我目前正在尝试设置授权，不幸的是，由于它在里面，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 调用调用。

为了使我的 auth api 请求正常工作，尤其是策略fetchUser()中的调用，user我需要从我的商店获取 companyId getter/state。我不知道如何在这里做到这一点？

有谁知道我如何才能最好地实现它？

任何帮助将不胜感激！

提前致谢！

标签： vue.jsaxiosvuexnuxtjs

解决方案

您可以在文件中禁用用户端点，nuxt.config.js然后在 Vuex 中手动调用端点以获取用户详细信息，然后将其传递给setUserauth NuxtJS 模块的方法。所以在你的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 请求以获取用户详细信息）。然后你按照这里setUser的描述打电话

推荐阅读