[英]I can't seem to get my React private route to work
我覺得這很簡單,但我很感激一些見解,因為我仍然是 React 的初學者。 我有一個私有路由設置和一個來自我通過 props 發送的 App.js 狀態的 authToken。 如果 authToken 為 true,則私有路由應該轉到 /HomePage,但是每次我使用有效憑據按下登錄按鈕時,它都會將我重定向到 /login。
應用程序.js
import ReactDOM from 'react-dom';
import HomeNavBar from './HomeNavBar.js'
import Login from './Login.js'
import Register from './Register.js'
import '../index.css';
import Routes from '../routes.js';
import axios from 'axios';
import qs from 'qs';
import HomePage from './HomePage.js';
import {Redirect} from 'react-router-dom';
class App extends React.Component {
constructor(props) {
super(props);
this.state = { apiResponse: "",
email: "",
password: "",
authToken: false
};
this.setEmail = this.setEmail.bind(this);
this.setPass = this.setPass.bind(this);
this.handleRegister = this.handleRegister.bind(this);
this.handleLogin = this.handleLogin.bind(this);
axios.defaults.withCredentials = true;
}
async handleLogin(){
if(this.state.email == "" || this.state.password == "") {
alert("Please complete form.");
}
else{
const{email, password} = this.state;
const user = {
email,
password,
};
var userId = 0;
await axios
.post('http://localhost:9000/api/getUserLogin', user)
.then(function (response){
console.log(response);
userId = response.data.userId;
//alert(userId);
})
.catch(err => {
console.log(err.response);
});
if(userId != 0){
this.state.validUser = true;
}
if(this.state.validUser){
this.state.authToken = true;
}
else{
this.state.authToken = false;
}
}
}
render() {
return (
<div className="HomeNavBar">
<Routes password = {this.state.password} email = {this.state.email} setPass = {this.setPass} setEmail = {this.setEmail} handleRegister = {this.handleRegister} handleLogin = {this.handleLogin} authToken = {this.state.authToken}/>
<p className="App-intro">{this.state.apiResponse}</p>
</div>
);
}
路由.js
import { Switch, Route, Router, withRouter } from 'react-router-dom';
/**
* Import all page components here
*/
import App from './components/App';
import Login from './components/Login.js';
import Register from './components/Register.js';
import HomePage from './components/HomePage.js';
import PrivateRoute from './privateRoutes.js';
/**
* All routes go here.
* Don't forget to import the components above after adding new route.
*/
export default function Routes(props) {
return (
<div>
<Switch>
<Route path='/Login'>
<Login setPass = {props.setPass} setEmail = {props.setEmail} handleLogin = {props.handleLogin} />
</Route>
<Route path='/Register'>
<Register setPass = {props.setPass} setEmail = {props.setEmail} handleRegister = {props.handleRegister} />
</Route>
<PrivateRoute authToken={props.authToken} path='/HomePage' component={HomePage} />
<Route path='/'>
<Login setPass = {props.setPass} setEmail = {props.setEmail} handleLogin = {props.handleLogin} />
</Route>
</Switch>
</div>
);
}
私有路由.js
import { Route, Redirect } from 'react-router-dom';
const PrivateRoute = ({component: Node, authToken, ...rest }) => (
<Route
{...rest}
render={props =>
authToken ? (
<Node {...props} />
) : (
<Redirect
to={{
pathname: "/Login",
state: {from: props.location}
}}
/>
)
}
/>
);
export default PrivateRoute;
所以我認為改變組件的狀態會導致渲染。 例如,我認為“this.state.authToken = false;” 會重新渲染組件,這讓我對為什么我的身份驗證令牌沒有正確更新或其他任何事情感到困惑。 然后我了解到我需要使用“this.setState”來分配值。 因此,我的所有狀態值都有效,而我的私人路線現在有效。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.