[英]Custom UI for AWS Amplify with Authenticator wont start my app after login
I have created my own Custom UI for AWS Amplify.我为 AWS Amplify 创建了自己的自定义 UI。 I am following the amplify guide on how I should do this, namely by using Authenticator, overriding the
showComponent()
methods of 'SignIn' and 'RequireNewPassword'.我正在遵循有关如何执行此操作的放大指南,即通过使用身份验证器,覆盖“SignIn”和“RequireNewPassword”的
showComponent()
方法。 This all works well.这一切都很好。 I can log in and change my password.
我可以登录并更改密码。 My issue is I cannot for the life of me get my app default route to work after logging in.
我的问题是我一生都无法在登录后让我的应用程序默认路由正常工作。
I use the AppWithAuth
common setup:我使用
AppWithAuth
通用设置:
export default class AppWithAuth extends React.Component<{}, { authState: string }> {
classes: any;
constructor(props) {
super(props);
this.state = { authState: '' };
this.handleAuthStateChange = this.handleAuthStateChange.bind(this);
}
handleAuthStateChange(state) {
this.setState({ authState: state });
}
render() {
return (
<div>
{this.state.authState === 'signedIn' ? (
<Authenticator
theme={authTheme}
hideDefault={true}
//hide={[SignIn, RequireNewPassword]}
amplifyConfig={awsconfig}
onStateChange={this.handleAuthStateChange}>
<App />
</Authenticator>
) : (
<Authenticator
theme={authTheme}
hideDefault={true}
//hide={[SignIn, RequireNewPassword]}
amplifyConfig={awsconfig}
onStateChange={this.handleAuthStateChange}>
<ChangePassword {...this.props} />
<Login override={SignIn} {...this.props} />
</Authenticator>
)}
</div>
);
}
}
Login
extends SignIn
and only shows when this._validAuthStates = ['signIn', 'signedOut', 'signedUp'];
Login
扩展SignIn
并且仅在this._validAuthStates = ['signIn', 'signedOut', 'signedUp'];
ChangePassword
extends RequireNewPassword
and only shows when this._validAuthStates = ['requireNewPassword'];
ChangePassword
扩展了RequireNewPassword
并且仅在this._validAuthStates = ['requireNewPassword'];
Both of those paths behave as expected.这两条路径都按预期运行。 It's the next step that has me stumped.
这是让我难倒的下一步。
This is my App Class:这是我的应用程序类:
import React from 'react';
import { AuthPiece } from 'aws-amplify-react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
...
interface AppProps {
authState?: any;
}
export default class App extends AuthPiece<AppProps, {}> {
constructor(props) {
super(props);
this._validAuthStates = ['signedIn'];
}
showComponent() {
return (
<React.Fragment>
<Router>
<Switch>
<Route component={LoggedIn} />
...bunch of routes
</Switch>
</Router>
</React.Fragment>
);
}
}
My understanding is by setting this._validAuthStates = ['signedIn'];
我的理解是通过设置
this._validAuthStates = ['signedIn'];
, it should render my App (according to https://aws-amplify.github.io/docs/js/authentication#show-your-app-after-sign-in ) ,它应该呈现我的应用程序(根据https://aws-amplify.github.io/docs/js/authentication#show-your-app-after-sign-in )
Does anyone know what I am doing wrong?有谁知道我做错了什么? It seems to completely ignore the App component.
它似乎完全忽略了 App 组件。 Should I be extending AuthPiece?
我应该扩展 AuthPiece 吗?
Cheers干杯
Update Updated the AppWithAuth.tsx
I seem to have tracked it down to the router and how it behaves.更新更新了
AppWithAuth.tsx
我似乎已经将它追踪到路由器及其行为方式。 If I simply render a simple react page, it's fine, otherwise it seems to redirect, but not load the page I want.如果我只是渲染一个简单的反应页面,那很好,否则它似乎会重定向,但不会加载我想要的页面。
@here so it appears I was doing it right, the issue was in the way I had set up my react components and stateless components and how I was talking to them with React Router. @here 所以看起来我做得对,问题在于我设置 React 组件和无状态组件的方式以及我如何使用 React Router 与它们交谈。 If it helps, the above is working code for custom UI in amplify authenticator.
如果有帮助,以上是放大身份验证器中自定义 UI 的工作代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.