身份验证后将用户信息传递给反应组件答案

【问题标题】：Passing user information to react component after authentication身份验证后将用户信息传递给反应组件
【发布时间】：2019-01-16 19:20:46
【问题描述】：

我是新手，所以这个问题可能听起来很傻。我正在开发一个后端作为 asp.net 核心的反应应用程序。我想在应用程序中拥有两个角色，即我在 AAD 中设置的角色 A 和角色 B。身份验证后，我希望用户的角色可用于反应组件。在前端传递此信息或读取此信息的最佳方式可能是在反应组件内部。在我从控制器获取用户信息之前，DOM 正在渲染。

我尝试使用 mobx 存储来存储来自控制器的数据。但我现在面临的问题是 DOM 在调用完成之前被渲染，这是我不想要的。如何在渲染 DOM 之前等待 api 调用完成？

这里ReactDOM.render 不等待stores[USERSTORE].setRole() 完成。如果我不使用异步等待，我会收到未决的承诺并且响应未定义。

boot.tsx

 stores[USERSTORE].setRole();

 ReactDOM.render(
 <div>"Dome content"</div>,
 root
 );

service.ts

 const client = AxiosAuthClient.createClient('/api/auth');

 export const authService =
 {
  GetUserRole: async() => {
   const x = await client.get(`userinfo`);
   return x;
  },

  };

userstore.ts

  import { observable, action } from 'mobx';
  import { authService } from '../api/AuthService';
  import { AxiosResponse, AxiosError } from 'axios';

  export class UserStore {
  public constructor() {
   this.isApprover = false; 
   }

   @observable public isApprover: boolean = false;

   @action
   public setRole = () => {

   authService.GetUserRole()
    .then((res: AxiosResponse) => {
        this.setUserRole(res.data);

    })

    .catch((err: AxiosError) => {

        const response = err.response;
        console.log(response.data.errors)
    });

     }

    @action
    public setUserRole = (data : boolean) => {
    this.isApprover = data;
     }
    }

控制器

[Route("api/auth")]
public class AuthController : Controller
{
    [HttpGet]
    [Route("userinfo")]
    public async Task<IActionResult> Index()
    {
        var result = await getrole();
        return Ok(result);
    }

    public async Task<bool> getrole()
    {
        return true;
    }
}

【问题讨论】：

标签： c# reactjs asp.net-core asp.net-core-webapi

【解决方案1】：

您有多种选择，其中一些最受欢迎：

使用像 Redux 这样的全局存储 (https://redux.js.org/)
将凭据存储在上层组件中（提升状态https://reactjs.org/docs/lifting-state-up.html）
将凭据存储在 localStorage (https://developer.mozilla.org/it/docs/Web/API/Storage/setItem)

【讨论】：

非常感谢。我正在使用 Mobx 商店来存储用户信息。但我的问题基本上是我应该如何在前端应用程序中获得用户声明。拥有一个 Auth 控制器然后通过在 react 中调用此 API 来获取信息是一个好主意吗？
如果您执行 SSR（服务器端渲染），您实际上可以在全局常量对象中打印这些凭据。如果您不执行 SSR，您可以在 auth 之后获取凭据（或与 auth 凭据聚合）并在启动 react 应用程序之前将其存储。

【解决方案2】：

将您的关键数据存储在localStorage 而不是redux。用户凭据是我们应用程序中的关键数据。浏览器刷新后，我们的应用程序状态会初始化。

您可能在整个应用程序中都需要它。所以在任何情况下都不要丢失它。

【讨论】：