我在react有一个应用程序，我想用密码保护所有的页面，我有标题，导航栏和页脚，当我这样做与受保护的路由类，如果邮件和密码是好的，它重定向我到没有导航栏和标题的组件，只有组件，我怎样才能保护显示所有的页面
<ProtectedRoute exact path="/" component={analyticsDashboard} />
与
import React from 'react'
import { Redirect } from 'react-router-dom'
import { is } from '@babel/types';
import AppRouter from '../Router';
class ProtectedRoute extends React.Component {
render() {
const Component = this.props.component;
const isAuthenticated = localStorage.getItem('token');
if(isAuthenticated==='0')
{
return <Redirect to={{ pathname: '/pages/login' }} />
}
return <Component/>
}
}
export default ProtectedRoute;
感谢您告诉我，我可以在生产中使用哪种方法来代替本地存储
您可以按以下方式创建一个特别程序
当您想要将令牌值设置为本地存储时，首先调用此函数
// call this function in the root component when you want to set the token
function setLocalStorage (key, value) {
const originalSetItem = localStorage.setItem;
localStorage.setItem = function(key, value) {
const event = new Event('itemInserted');
event.value = value;
event.key = key;
document.dispatchEvent(event);
originalSetItem.apply(this, arguments);
};
}
第二，创建一个hoc
import { Redirect } from 'react-router-dom'
export default function(ComposedComponent) {
class Authentication extends Component {
state = {
isAuthenticated: !!localStorage.getItem('token')
};
localStorageSetHandler({ key, value }) {
if (key !== 'token') return;
this.setState(({
isAuthenticated: !!value,
}))
}
componentDidMount() {
document.addEventListener("itemInserted", this.localStorageSetHandler, false);
}
render() {
const { isAuthenticated } = this.state;
if (!isAuthenticated) {
return <Redirect to={{ pathname: '/pages/login' }} />;
}
return <ComposedComponent />;
}
}
}
然后使用您创建的hoc创建受保护的路由，如下所示
<Route
path={'/path'}
component={RequireAuth(lazy(() => import('./component path')))} // or you can use component={RequireAuth(YourComponent)}
/>
