Question

我是新来的反应者，所以这个问题听起来很愚蠢。我正在开发一个后端为asp.net核心的React应用程序。我想在应用程序中具有两个角色，分别是我在AAD中设置的角色A和角色B。身份验证后，我希望用户角色可用于响应组件。在前端传递此信息或读取此信息的最佳方法可能是在react组件内部。在从控制器中获取用户信息之前，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;
    }
}

Answer 1

您可以选择varioius，其中一些最受欢迎：

使用Redux（https://redux.js.org/）之类的全局商店
将凭证存储在上部组件中（提升状态为https://reactjs.org/docs/lifting-state-up.html）
将凭据存储在localStorage（https://developer.mozilla.org/it/docs/Web/API/Storage/setItem）

Answer 2

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

在您的整个应用程序中可能都需要它。因此，无论如何都不要丢失它。

认证后传递用户信息以响应组件

2 个答案: