Передача пользовательской информации для реагирования компонента после аутентификации - PullRequest
Новая
       9

Передача пользовательской информации для реагирования компонента после аутентификации

0 голосов
/ 07 сентября 2018

Я новичок, чтобы реагировать, и поэтому этот вопрос может показаться глупым. Я разрабатываю приложение реагировать с бэк-энда в качестве ядра asp.net. Я хочу иметь две роли в приложении: роль A и роль B, которые я настраиваю в AAD. После аутентификации я хочу, чтобы роль пользователя была доступна для реагирования компонента. Что является лучшим способом передачи этой информации или чтения этой информации в переднем конце, может быть внутри компонента реакции. DOM обрабатывается до того, как я получу информацию о пользователе с контроллера.

Я пытался использовать хранилище mobx для хранения данных с контроллера. Но проблема, с которой я сейчас сталкиваюсь, заключается в том, что DOM обрабатывается до завершения вызова, а я этого не хочу. Как я могу ждать завершения вызова API, прежде чем будет обработан DOM?

Здесь 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;
    }
}

Ответы [ 2 ]

0 голосов
/ 07 сентября 2018

Храните ваши важные данные в localStorage, а не в redux. Учетные данные пользователя являются важными данными в нашем приложении. После обновления браузера состояние нашего приложения инициализировано .

Это может понадобиться вам в вашем приложении. Так что не теряй его ни в коем случае.

0 голосов
/ 07 сентября 2018

У вас есть различные варианты, некоторые из самых популярных:

  1. Используйте глобальный магазин, такой как Redux (https://redux.js.org/)
  2. Хранить учетные данные в верхнем компоненте (состояние подъема вверх https://reactjs.org/docs/lifting-state-up.html)
  3. Хранить учетные данные в localStorage (https://developer.mozilla.org/it/docs/Web/API/Storage/setItem)
...