如何将用户信息从前端传递到后端

Posted 2023-02-22

【中文标题】如何将用户信息从前端传递到后端

【英文标题】：How to pass user information from frontend to backend

【发布时间】：2020-03-01 22:39:25

【问题描述】：

我有一个用 Nuxt.js 编写的 Ruby on Rails 后端 API 和前端应用程序，集成了用于身份验证的 Auth0 和用于 API 通信的 Axios。

身份验证工作正常，但是前端不会将用户信息传递给后端。只有 user_id 和 Authorization Bearer token，没有 email、name 等属性。然而，这些属性在前端认证后可用，并在 Vuex 商店中保存/可用。

如何告诉前端（Axios）在每个对后端的 API 请求中包含额外的用户属性？是否有任何语法可以访问 Vuex 存储并在 nuxt.config.js 中定义全局 Axios 属性，或者有更简单的方法吗？

Nuxt.config.js

auth: 

  redirect: 

    login: '/auth/login',

    callback: '/auth/callback'

  ,

  strategies: 

    auth0: 

      domain: config.AUTH.DOMAIN,

      client_id: config.AUTH.CLIENT_ID,

      audience: config.AUTH.AUDIENCE

    

  

请求后端并将结果保存到 Vuex 商店的示例

this.$axios.get('/organizations/4/projects')

    .then(response => 

        this.setProjects(response.data.projects);

)

    .catch(error => 

      console.log(error);

    );

【参考方案1】：

您可以将额外信息（在custom claim 中）添加到访问令牌中，然后在您发出请求时后端可以使用它。

另一种策略是使用/userinfo endpoint 来请求用户配置文件，尽管这需要来自后端的额外调用。

此处的权衡是使用自定义声明增加令牌大小与使用 /userinfo 端点进行额外 API 调用。