Question

我正在开发一个后端为asp.net核心的react应用程序。我想在react组件内部获取一些授权信息，以根据角色显示或隐藏一些模板。什么是传递此信息或阅读的最佳方法是什么前端的此信息可能在react组件内部。

我尝试使用mobx存储来存储来自控制器的数据，但现在面临的问题是在api调用完成之前获取了DOM，并且获取了我不想要的授权信息。如何等待api调用以在呈现DOM之前完成。

这里ReactDOM.render不会等待store [USERSTORE] .setRole（）完成。如果我不使用async await，则会收到未决的承诺，并且响应未定义。

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;
        }
    }

在axios调用获得响应之前呈现DOM

0 个答案: