Сначала создадим основной маршрут Asp.Net, а затем перейдем к маршруту React

Question

Я новичок, чтобы реагировать, но не на разработку ядра приложения asp.net. Я пытаюсь создать реагирующее приложение с ядром asp.net + шаблон реагирования в visual studio. Я пытаюсь сначала выполнить маршрут Asp.Net MVC, чтобы вызвать действие контроллера с атрибутом [Authorize], чтобы убедиться, что пользователь аутентифицирован. У меня нет ничего, чтобы показать в представлении Asp.Net MVC. Я хочу немедленно перенаправить пользователя, чтобы он реагировал на маршрут по умолчанию, как только пользователь прошел аутентификацию через действие контроллера asp.net mvc. Существует ли какой-либо конкретный механизм маршрутизации для достижения этого.

Прямо сейчас мое приложение проходит через контроллер и действие, основанное на маршруте, и останавливается в представлении, определенном действием контроллера. Я пытаюсь понять, как перенаправить пользователя, чтобы использовать реагировать маршрут сейчас. Я пытался использовать return redirecttoaction и returnredirecttoroute, но безуспешно.

My Asp.Net Core MVC Action

[Authorize]
public ActionResult Index()
{
    var IsAuthenticated = HttpContext.User.Identity.IsAuthenticated;
    var UserName = "Guest";
    if (IsAuthenticated)
    {
        UserName = HttpContext.User.Identity.Name;
    }
    TempData["userName"] = UserName;

    //return View();
    return Redirect("my react first page");
}

Я попытался вернуть Redirect ("моя первая реакция");

Метод моего файла запуска, используемый для маршрутизации

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
            {
                if (env.IsDevelopment())
                {
                    app.UseDeveloperExceptionPage();
                }
                else
                {
                    app.UseExceptionHandler("/Error");
                    app.UseHsts();
                }

                app.UseHttpsRedirection();
                app.UseStaticFiles();
                app.UseSpaStaticFiles();
                app.UseAuthentication();


//MVC Part. I am trying this to authorize as FIRST step
                app.UseMvc(routes =>
                {
                    routes.MapRoute(
                        name: "default",
                        template: "{controller=DataAccess}/{action=Index}/{id?}");
                });

// React part I am trying this to be called once Authentication is done in controller action. Trying to call this as a SECOND step

                app.UseSpa(spa =>
                {
                    spa.Options.SourcePath = "ClientApp";

                    if (env.IsDevelopment())
                    {
                        spa.UseReactDevelopmentServer(npmScript: "start");
                    }
                });
            }

Если я сделаю перенаправление и форсирую маршрут реакции, будут ли какие-либо проблемы, пропущенные функции маршрута реакции? Я вижу, что spa.UseReactDevelopmentServer (npmScript: "start"); занимает больше времени, показывая время ожидания, если я делаю перенаправление. Любое решение, где пользователь может быть перенаправлен на действие контроллера, выполняет всю авторизацию и использует механизм маршрутизации по умолчанию реакции?

Есть ли возможность сначала запустить реагирующий сервер и выполнить маршрутизацию, так как запуск сервера занимает больше времени, приводя к таймаутам.

Примечание. Для создания приложения я использовал Create-React-App.

Answer 1

Не устанавливайте одинаковые маршруты для обоих, позвольте серверу найти представление, отличное от React, и разрешите React иметь собственные маршруты и представление / шаблоны

Answer 2

Я преодолел эту проблему с ядром .net и также отреагировал.

Реагировать: Настройте HOC для вашей маршрутизации. Сделайте так, чтобы этот сервер попал в бэкэнд, чтобы увидеть, авторизован ли пользователь. Если не перенаправить на логин.

.Net Core: Установите базовый путь для попадания HOC и убедитесь, что пользователь авторизован.

Вот полная запись на моем github (хотя это с токенами jwt): https://github.com/moh704/AuthenticationExample

//Routing with HOC:
class App extends Component {
  render() {
    return (
        <Provider store={store}>
          <ConnectedRouter history={history}>
            <Switch>
              <Route component={SignIn} exact path='/'/>
              <PrivateRoute component={Home} path='/Home'/> //Token will have to be valid in order to access this route.
            </Switch>
          </ConnectedRouter>
        </Provider>
    );
  }
}

//PrivateRoute Component:
interface PrivateRouteProps extends RouteProps {
  component:
    | React.ComponentType<RouteComponentProps<any>>
    | React.ComponentType<any>;
}

interface State {
  validatingUser: boolean,
  userAllowed: boolean
}

class PrivateRouter extends React.Component<PrivateRouteProps, State> {
  state: State = {
    validatingUser: true,
    userAllowed: false
  };

  componentDidMount(): void {
    this.checkUserStatus();
  }

  checkUserStatus = async() => {
    const token = localStorage.getItem('token');
    if (token){
      await axios.get(UserRoutes.GET_TOKEN_STATUS)
        .then(() => this.setState({userAllowed: true, validatingUser: false}))
        .catch(() => this.setState({userAllowed: true, validatingUser: false}));
    } else
      this.setState({userAllowed: false, validatingUser: false});
  };

  render() {
    const { component, ...rest} = this.props;
    return(
      !this.state.validatingUser ?
        <Route
          {...rest}
          render={props =>
            this.state.userAllowed ? (
              <this.props.component {...props} />
            ) : (
              <Redirect // <---- **Redirect magic happens here you're aiming for**
                to={{
                  pathname: "/"
                }}
              />
            )
          }
        /> : <div>loading...</div>
    )
  }
}
export default PrivateRouter;

Для .net просто создайте простой маршрут get, который вернётся нормально, если авторизован. В противном случае он вернет несанкционированный или запрещенный код:

[HttpGet]
[Authorize]
public IActionResult CheckUserState()
{
   return Ok();
}

Answer 3

Я бы не советовал делать какую-либо маршрутизацию или перенаправление на стороне сервера.Это усложнит разработку, а также удвоит объем работы.Более простой способ - управлять маршрутизацией или перенаправлением на стороне клиента.Это также будет легче поддерживать с точки зрения кода.

Из React, когда пользователь входит в систему, вызовите действие вашего контроллера, чтобы выполнить аутентификацию / авторизацию.Затем вы можете соответствующим образом перенаправить с помощью React в зависимости от ответа (например, успешный вход в систему перенаправляет на панель пользователя, неудачный вход в систему отображает ошибку аутентификации и т. Д.)

Answer 4

Вы должны настроить маршрутизацию на стороне клиента в реакции и на стороне сервера в ядре asp.net.

Обратите внимание, что клиентские маршруты ограничены только браузером. Они не известны серверу.

Когда вы пытаетесь изменить страницу в реакции, браузер (без отправки запроса на сервер) перенаправляет пользователя на другую страницу - при условии, что вам не нужна никакая другая информация с сервера для этого перенаправления.

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

Идеальный поток (опять же, на мой взгляд) для маршрутизации, основанный на каком-то решении на сервере asp.net, будет:

• Клиент вызывает сервер для принятия решения
• Сервер отправляет ответ, чтобы отреагировать
• Затем React интерпретирует ответ и решает, следует ли перенаправить или нет.
• Если пользователь должен быть перенаправлен, то куда он должен быть перенаправлен.

Эта логика (или любая другая подобная логика) также будет полностью отделять логику на стороне сервера от технологии на стороне клиента.

Answer 5

Вы можете сделать главную страницу реакции отображением, которое она возвращает.

Тогда ваш контроллер может вернуть это представление или вы можете создать контроллер, который будет возвращать это представление и перенаправлять туда.