[英]aws-amplify/ui-reac, Is possible to redirect after sign in
Hello I'm trying to redirect and change my path after sign in using AWS-amplify and with react-dom您好,我在使用 AWS-amplify 和 react-dom 登录后尝试重定向和更改路径
I need after user login redirect them to localhost/main
main because its sill in localhost/
我需要在用户登录后将它们重定向到localhost/main
main 因为它在localhost/
If anyone have an idea can help me thank you My Code:如果有人有想法可以帮助我,谢谢我的代码:
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;
在搜索此问题后,解决方案是使用AUTH.signIn()
和Auth.signUp()
制作您自己的登录和注册设计,然后您可以重定向。
I'm using angular but I think it could be similar我正在使用 angular 但我认为它可能是相似的
onAuthUIStateChange((authState, authData) => {
console.log('LoginPage', authState, authData);
if (this.authState == AuthState.SignedIn) {
this.router.navigate(['']);
}
});
I usually do like this:我通常这样做:
<router>
with <AwsAuthenticator>
, a component that you will use to check the and require authentication.用<AwsAuthenticator>
包装<router>
,您将使用该组件来检查和要求身份验证。// @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}
/>
);
};
This worked for me, but it will redirect you to /main everytime you refresh the page, not only after login.这对我有用,但它会在您每次刷新页面时将您重定向到 /main,而不仅仅是在登录后。
Just import the react-router-dom hook useNavigate, set it to a variable and then call it inside the useEffect只需导入 react-router-dom 钩子 useNavigate,将其设置为变量,然后在 useEffect 中调用它
See it implemented in your code查看它在您的代码中实现
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.