gpt4 book ai didi

javascript - 使用 react-router-dom 的授权和认证

转载 作者:行者123 更新时间:2023-11-30 14:14:43 25 4
gpt4 key购买 nike

大家好,我是第一次来。

过去几个小时我一直在尝试解决这个问题,但我无法理解这个问题(我是新手)。

PrivateRoute 中,我尝试根据 session 呈现身份验证组件。

  • session EXISTS => 身份验证组件应该呈现
  • NOT EXISTS => 接收到的组件应该呈现

我得到的错误是:

Objects are not valid as a React child (found: [object Promise]). 
If you meant to render a collection of children, use an array instead.

帮助将不胜感激!

这是我到目前为止所做的:

import Login from './Login'
import Register from './Register'
import React, {Component} from 'react'
import Authentication from './Authentication'
import { BrowserRouter , Redirect, Route, Switch,} from 'react-router-dom'



const Authorization= ()=>{
return new Promise ((resolve,reject)=>{
fetch('http://localhost:3000/content',{credentials:'include'}) //includes cookie from different port
.then((res)=>res.json())
.then((data)=>{
if (data.user=="notLogged"){
reject(false)
}else
resolve(true)
})
})
}

const PrivateRoute= async ({ component: Component})=> {
var auth= await Authorization()
console.log(auth);
if (auth){
return <Authentication/>
}else{
return <Component/>
}
}

class Index extends Component{

render(){
return(
<BrowserRouter>
{/* router may have only one child element- switch is the more common */}
<Switch>
<PrivateRoute exact path="/" component={Login}/>
<PrivateRoute exact path="/login" component={Login} />
<Route exact path="/register" component={Register} />
</Switch>
</BrowserRouter>
)
}
}

export default Index

最佳答案

找到我帖子的答案。

我一直做错了。

这是我目前的想法

import Login from './Login'
import Register from './Register'
import React, {Component} from 'react'
import Authentication from './Authentication'
import { BrowserRouter , Route, Switch} from 'react-router-dom'


const PrivvatRoute=({ component: Component, user})=>(
<Route render={(props) => user==="notLogged" ? <Component/> : <Authentication user={user} /> } />
)

class Index extends Component{
constructor(props){
super(props);
this.state={user:""}
}

render(){
return(
<BrowserRouter>
{/* router may have only one child element- switch is the more common */}
<Switch>
<PrivvatRoute exact path="/" component={Login} user={this.state.user} />
<PrivvatRoute exact path="/login" component={Login} user={this.state.user} />
<PrivvatRoute exact path="/register" component={Register} user={this.state.user} />
</Switch>
</BrowserRouter>
)
}


componentWillMount(){
fetch('http://localhost:3000/content',{credentials:"include"})
.then((data)=>data.json())
.then((data)=>{this.setState(data); console.log(data)

})
}
}

export default Index

并且工作正常!

关于javascript - 使用 react-router-dom 的授权和认证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53782188/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com