サイドメニューの[ログアウト]をクリックすると
、/ loginに戻るはずですが、コンテンツが消えて同じルート/ homeに留まります。
App.jsのいくつかの状態の説明
import React, { Component } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import { Redirect } from "react-router";
import Login from "./Login";
import Drawer from "./Drawer";
console.warn = console.error = () => {};
class App extends Component {
state = {
isAuthenticated: false,
isAuthenticating: true,
user: null
};
setAuthStatus = (authenticated) => {
this.setState({ isAuthenticated: authenticated });
};
setUser = (user) => {
this.setState({ user: user });
};
handleLogout = async () => {
try {
//Sign Out api runs here
this.setAuthStatus(false);
this.setUser(null);
} catch (error) {
console.log(error);
}
};
async componentDidMount() {
try {
// run api change to auth setAuthStatus
// if api no return error > continue
this.setAuthStatus(true);
let user = { id: 123 };
this.setUser(user);
} catch (error) {
console.log(error);
}
this.setState({ isAuthenticating: false });
}
render() {
const authProps = {
isAuthenticated: this.state.isAuthenticated,
user: this.state.user,
setAuthStatus: this.setAuthStatus,
setUser: this.setUser
};
return (
!this.state.isAuthenticating && (
<React.Fragment>
{this.state.isAuthenticated ? (
<Drawer
props={this.props}
auth={authProps}
handleLogout={this.handleLogout}
/>
) : (
<BrowserRouter>
<Switch>
<Redirect exact from="/" to="/Login" />
<Route
path="/login"
render={(props) => <Login {...props} auth={authProps} />}
/>
</Switch>
</BrowserRouter>
)}
</React.Fragment>
)
);
}
}
export default App;
isAuthenticating：
componentDidMountはapiを呼び出して、セッションが続行する
かどうかを確認します。続行する場合、isAuthenticatingはtrueに等しく、ページを更新したり他のルートに移動したりするときに、現在のセッションでユーザー認証が失われるのを防ぐことができます。
isAuthenticated：
！isAuthenticated>がログインページにとどまる/ログインページにリダイレクトする必要がある場合
SandBox：https：//codesandbox.io/s/restless-breeze-p5uih ？ file = / src /
App.js
サンドボックスで期待どおりに動作します。ユーザーがでログアウトしている場合は、ドロワーとメインコンテンツを非表示にします
this.state.isAuthenticated ? (Drawer) : <Login/>
ドロワーをメインコンテンツから分離し、ルーターをマージする必要があります。通常、アプリには1つのルーターのみを使用する必要があります。また、リダイレクトを削除します。
<React.Fragment>
{this.state.isAuthenticated ? (
<Drawer
props={this.props}
auth={authProps}
handleLogout={this.handleLogout}
/>
) : (
<BrowserRouter>
<main
className={clsx(classes.content, {
[classes.contentShift]: open
})}
>
<Switch>
{Routes.map((route) => {
return (
<Route
path={route.path}
render={(prop) => (
<route.component {...prop} auth={props.auth} />
)}
/>
);
})}
<Route
path="/login"
render={(props) => <Login {...props} auth={authProps} />}
/>
</Switch>
</main>
</BrowserRouter>
)}
</React.Fragment>
ログアウトにルーティングするには、最初にブラウザルーターをインデックスまで移動して折り返します。これにより、withRouter HigherOrderComponentを使用export default withRouter(App)できるようになります。これで、小道具から履歴にアクセスして、ログインに移動できます。
this.props.history.push("/login")`
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加