[英]Implement AWS Amplify Authenticator using React and Ant Design Pro / UmiJS
I trying to implement the AWS Amplify Authenticator in Ant Design Pro / UmiJS我试图在 Ant Design Pro / UmiJS 中实现 AWS Amplify Authenticator
In the UmiJS config.ts file I have this configuration:在 UmiJS config.ts 文件中,我有这样的配置:
routes: [
(...){
path: '/',
component: '../layouts/AwsSecurityLayout',
routes: [
{
path: '/',
component: '../layouts/BasicLayout',
authority: ['admin', 'user'],
routes: [
{
path: '/links',
name: 'fb.links',
icon: 'BarsOutlined',
component: './Links',
},(...)
The base component AwsSecurityLayout wraps the routes who will the guard.基础组件 AwsSecurityLayout 包装了将要守卫的路由。 Looks like that:看起来像这样:
import React from 'react';
import { withAuthenticator } from '@aws-amplify/ui-react';
import { PageLoading } from '@ant-design/pro-layout';
class AwsSecurityLayout extends React.Component {
render() {
const { children } = this.props;
if (!children) {
return <PageLoading />;
}
return children;
}
}
export default withAuthenticator(AwsSecurityLayout);
Went I use the withAuthenticator func the props from UmiJs are not passed to the component, so props and props.child are all ways undefied.我使用了withAuthenticator函数,来自 UmiJs 的道具没有传递给组件,所以 props 和 props.child 都是不可抗拒的。
The original file from Ant Design Pro: Ant Design Pro 的原始文件:
import React from 'react';
import { PageLoading } from '@ant-design/pro-layout';
import { Redirect, connect, ConnectProps } from 'umi';
import { stringify } from 'querystring';
import { ConnectState } from '@/models/connect';
import { CurrentUser } from '@/models/user';
interface SecurityLayoutProps extends ConnectProps {
loading?: boolean;
currentUser?: CurrentUser;
}
interface SecurityLayoutState {
isReady: boolean;
}
class SecurityLayout extends React.Component<SecurityLayoutProps, SecurityLayoutState> {
state: SecurityLayoutState = {
isReady: false,
};
componentDidMount() {
this.setState({
isReady: true,
});
const { dispatch } = this.props;
if (dispatch) {
dispatch({
type: 'user/fetchCurrent',
});
}
}
render() {
const { isReady } = this.state;
const { children, loading, currentUser } = this.props;
// You can replace it to your authentication rule (such as check token exists)
// 你可以把它替换成你自己的登录认证规则(比如判断 token 是否存在)
const isLogin = currentUser && currentUser.userid;
const queryString = stringify({
redirect: window.location.href,
});
if ((!isLogin && loading) || !isReady) {
return <PageLoading />;
}
if (!isLogin && window.location.pathname !== '/user/login') {
return <Redirect to={`/user/login?${queryString}`} />;
}
return children;
}
}
export default connect(({ user, loading }: ConnectState) => ({
currentUser: user.currentUser,
loading: loading.models.user,
}))(SecurityLayout);
I Just basically wrap the component using withAuthenticator我基本上只是使用withAuthenticator包装组件
I solved using the conditional rendering doc: https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#manage-auth-state-and-conditional-app-rendering我使用条件渲染文档解决了: https://docs.amplify.aws/ui/auth/authenticator/q/framework/react#manage-auth-state-and-conditional-app-rendering
code:代码:
import React from 'react';
import { AmplifyAuthenticator } from '@aws-amplify/ui-react';
import { AuthState, onAuthUIStateChange } from '@aws-amplify/ui-components';
const AwsSecurityLayout: React.FunctionComponent = (props: any | undefined) => {
const [authState, setAuthState] = React.useState<AuthState>();
const [user, setUser] = React.useState<any | undefined>();
React.useEffect(() => {
return onAuthUIStateChange((nextAuthState, authData) => {
setAuthState(nextAuthState);
setUser(authData);
});
}, []);
return authState === AuthState.SignedIn && user ? (
props.children
) : (
// TODO: change style / implement https://github.com/mzohaibqc/antd-amplify-react
<AmplifyAuthenticator />
);
}
export default AwsSecurityLayout;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.