Question

我正在尝试保护两条不同的路由，要访问该路由，用户必须进行身份验证，我也遵循了question，但这对我没有任何帮助。在我的Header.js中，已在该文件上提供了所有逻辑，以检查用户是否已登录（使用redux动作，reducer），所以我直接给this.chipsSelect.multiSelectBox.onSave pipe( takeWhile(_ => this.alive), map((tags: IOptionMultiSelectBox[]) => tags.filter(tag => tag.selected == true)), // .....，当用户登录时就像一个欢迎页面。而且，如果在某些情况下浏览器已刷新，则每当按照此路线进行操作时，就有另一条路线<Redirect to='/surveys'/>，我会再次回到/surveys/new链接，我想在用户重新加载浏览器时保留该页面。请检查/surveys函数...我已经完全厌倦了寻找解决方法请帮助我

这是我的Header.js文件

renderLocation()

Answer 1

使用高阶组件

export const withAuth = (Component) => {
    return () => {
        // Check if Authenticated
        const user = checkUserSession() // Handle return user context if authenticated or null if not

        // If Logged in, it will render the Component.
        if (user) {
            return <Component user={user} />;
        } else {
            return <LoginComponent />
        }
    };
};

现在，您需要使用哪个路由进行身份验证，只需导出相应的组件，例如

import withAuth from './withAuth.jsx'

class MyProtectedComponent extends React.Component {
     // ...
}

export default withAuth(MyProtectedComponent)

登录后，只需重新渲染组件即可。

处理多条受保护的路线

这是我的Header.js文件

1 个答案: