aws-amplify/ui-reac，登录后可以重定向

Question

您好，我正在尝试使用 AWS-amplify 和 React-dom 登录后重定向并更改我的路径

我需要在用户登录后将它们重定向到

localhost/main

main，因为它仍然在

localhost/

如果有人有想法可以帮助我谢谢 我的代码：

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Amplify from "aws-amplify";
import {
  AmplifyAuthenticator,
  AmplifySignUp,
} from "@aws-amplify/ui-react";
import { AuthState, onAuthUIStateChange } from "@aws-amplify/ui-components";
import awsconfig from "./aws-exports";
import Main from "./main";

Amplify.configure(awsconfig);

const AuthStateApp = () => {
  const [authState, setAuthState] = React.useState();
  const [user, setUser] = React.useState();

  React.useEffect(() => {
    return onAuthUIStateChange((nextAuthState, authData) => {
      setAuthState(nextAuthState);
      setUser(authData);
    });
  }, []);

  return authState === AuthState.SignedIn && user ? (
    <Router>
      <Switch>
        <Route path="/main">
          <Main />
        </Route>
      </Switch>
    </Router>
  ) : (
    <AmplifyAuthenticator>
      <AmplifySignUp
        slot="sign-up"
        formFields={[
          { type: "username" },
          { type: "password" },
          { type: "email" },
        ]}
      />
    </AmplifyAuthenticator>
  );
};

export default AuthStateApp;

Answer 1

搜索此问题后，解决方案是使用

AUTH.signIn()

和

Auth.signUp()

自行设计登录和注册，然后可以重定向。

Answer 2

我正在使用 Angular，但我认为它可能是相似的

  onAuthUIStateChange((authState, authData) => {
            console.log('LoginPage', authState, authData);
            if (this.authState == AuthState.SignedIn) {
                this.router.navigate(['']);
            }
        });

Answer 3

我通常这样做：

1. 用

   <router>

   包裹

   <AwsAuthenticator>

   ，您将使用该组件来检查并要求身份验证。
2. 在 AwsAuthenticator.tsx（或者 js，如果您不使用打字稿），您将执行以下操作：

// @ts-ignore
import {Authenticator} from 'aws-amplify-react-native';
import React, {ReactNode, useState} from 'react';
import {signUpConfig} from '@app/components/Authentication/SignUpForm.config';

interface AwsAuthenticatorProps {
  children: ReactNode;
}

export const AwsAuthenticator = ({children}: AwsAuthenticatorProps) => {
  const [loggedIn, setLoggedIn] = useState<boolean>(false);

  // possible states: signIn | signedIn | signedOut
  const handleAuthStateChange = (authState: string) =>
    authState === 'signedIn' ? setLoggedIn(true) : setLoggedIn(false);

  return loggedIn ? (
    <>{children}</>
  ) : (
    <Authenticator
      usernameAttributes="email"
      signUpConfig={signUpConfig}
      onStateChange={handleAuthStateChange}
    />
  );
};

Answer 4

对于 amplify v5 有一个解决方案：

  useEffect(() => {
    Hub.listen("auth", (data) => {
      if (data?.payload?.event === "signIn") {
        router.push("/");
      }
    });
  }, []);

Answer 5

这对我有用，但每次刷新页面时它都会将您重定向到 /main，而不仅仅是在登录后。

只需导入react-router-dom钩子useNavigate，将其设置为一个变量，然后在useEffect中调用它

查看它在您的代码中的实现

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Amplify from "aws-amplify";
import {
  AmplifyAuthenticator,
  AmplifySignUp,
} from "@aws-amplify/ui-react";
import { AuthState, onAuthUIStateChange } from "@aws-amplify/ui-components";
import awsconfig from "./aws-exports";
import Main from "./main";
import { useNavigate } from "react-router-dom";

Amplify.configure(awsconfig);

const AuthStateApp = () => {
  const [authState, setAuthState] = React.useState();
  const [user, setUser] = React.useState();
  const navigate = useNavigate();

  React.useEffect(() => {
    return onAuthUIStateChange((nextAuthState, authData) => {
      setAuthState(nextAuthState);
      setUser(authData);
      navigate("/main");
    });
  }, []);

  return authState === AuthState.SignedIn && user ? (
    <Router>
      <Switch>
        <Route path="/main">
          <Main />
        </Route>
      </Switch>
    </Router>
  ) : (
    <AmplifyAuthenticator>
      <AmplifySignUp
        slot="sign-up"
        formFields={[
          { type: "username" },
          { type: "password" },
          { type: "email" },
        ]}
      />
    </AmplifyAuthenticator>
  );
};

export default AuthStateApp;