使用React路由器在ReactJS中进行身份验证

我有一个简单的

route.js

文件

const PrivateRoute = ({ component, ...rest }) => {
  const isAuthed = localStorage.getItem('Authorization')
  return (
    <Route {...rest} exact
      render = {(props) => (
        isAuthed ? (
          <div>
            {React.createElement(component, props)}
          </div>
        ) :
        (
          <Redirect
            to={{
              pathname: '/login',
              state: { from: props.location }
            }}
          />
        )
      )}
    />
  )
}
class App extends Component {
  componentWillMount() {
    if (localStorage.getItem('Authorization')) {
      history.push(`${history.location.pathname}`)
    }
  }

  render() {
    return (
      <Router history={history}>
        <div className="App-pageContainer">
          <Route exact path="/" render={() => <Redirect to="/login" />} />
          <Route path={'/login'} component={Login} />
          <PrivateRoute path={'/dashboard'} component={Dashboard} />
        </div>
      </Router>
    )
  }
}
export default App

const privaterote=（{component，…rest}）=>{
const isAuthed=localStorage.getItem（'授权'）
返回(
(
我被授权了(
{React.createElement（组件、道具）}
) :
(
)
)}
/>
)
}
类应用程序扩展组件{
组件willmount（）{
if（localStorage.getItem（'Authorization'））{
history.push（`${history.location.pathname}`）
}
}
render（）{
返回(
} />
)
}
}
导出默认应用程序

我需要的是，如果用户在本地存储中有密钥（

Authentication

），那么我想将其重定向到

/dashboard

，如果它在本地存储中不包含

Authentication

，那么我想将其重定向到

/login

---

这几天来，我完全被这件事缠住了。请帮忙

我认为这类问题太宽泛了，无法回答

然而，您可以遵循这篇惊人的文章来实现该功能

这是你完成后得到的

从“React”导入React
进口{
BrowserRouter作为路由器，
路线,，
链接
重新使用
带路由器
}从“反应路由器dom”
常数fakeAuth={
I认证：错误，
认证（cb）{
this.isAuthenticated=true
设置超时（cb，100）
},
签出（cb）{
this.isAuthenticated=false
设置超时（cb，100）
}
}
const Public=（）=>Public
const Protected=（）=>Protected
类登录扩展了React.Component{
render（）{
返回(
登录
)
}
}
const privaterout=（{component:component，…rest}）=>(
(
fakeAuth.isAuthenticated==true
? 
: 
)} />
)
导出默认函数AuthExample（）{
返回(

公共页
保护页

)
}

我认为这类问题太宽泛了，无法回答

然而，您可以遵循这篇惊人的文章来实现该功能

这是你完成后得到的

从“React”导入React
进口{
BrowserRouter作为路由器，
路线,，
链接
重新使用
带路由器
}从“反应路由器dom”
常数fakeAuth={
I认证：错误，
认证（cb）{
this.isAuthenticated=true
设置超时（cb，100）
},
签出（cb）{
this.isAuthenticated=false
设置超时（cb，100）
}
}
const Public=（）=>Public
const Protected=（）=>Protected
类登录扩展了React.Component{
render（）{
返回(
登录
)
}
}
const privaterout=（{component:component，…rest}）=>(
(
fakeAuth.isAuthenticated==true
? 
: 
)} />
)
导出默认函数AuthExample（）{
返回(

公共页
保护页

)
}

非常感谢您的回答，我会检查并告诉您不客气！考虑接受它，以防它确实有帮助这是什么。我在这里验证了

和
cb
？我们正在伪造将在服务器端实现的身份验证过程
isAuthenticated
为真表示用户已验证，反之亦然。你可以看到
cb
和
setTimeout（cb，100）
方法，它们假装你必须等待，比如说，在现实生活中，0,1s才能从服务器接收结果。最后一个问题，如果我登录一次，它不应该再把我扔到登录页面上。不是吗？非常感谢你的回答，我会查一查让你知道不客气！考虑接受它，以防它确实有帮助这是什么。我在这里验证了
和
cb
？我们正在伪造将在服务器端实现的身份验证过程
isAuthenticated
为真表示用户已验证，反之亦然。你可以看到
cb
和
setTimeout（cb，100）
方法，它们假装你必须等待，比如说，在现实生活中，0,1s才能从服务器接收结果。最后一个问题，如果我登录一次，它不应该再把我扔到登录页面上。不是吗？