我在理解為什么我的應用程式運行有點奇怪時遇到了問題。當我嘗試通過單擊導航欄中的鏈接按鈕訪問我頁面上的任何站點時，它會毫無問題地將我導航到那里，例如當我單擊“我的帳戶”時，URL 更改為“http://localhost:3000/my_account”一切正常。在這個地方我不得不提到“/my_account”是一個受保護的路由——用戶必須登錄才能訪問它，當他沒有登錄時——他會被發送到主頁。所以現在的問題是，當用戶登錄并嘗試通過輸入此 URL 和加載頁面來到達受保護的路由時，例如“http://localhost:3000/my_account” - 他被視為未登錄的用戶并被重定向到主頁。在他被重定向到那里并嘗試通過單擊導航欄鏈接訪問此站點后，他可以進入此頁面 - 他已登錄。我的預期結果是用戶可以在站點上輸入任何 URL，如果他在兩種情況下都登錄，則應該正確檢查 - 單擊站點上的鏈接或提供 URL . 誰能告訴我我哪里出錯了？
UserAccount (/my_account) 是一個簡單的組件：
import React, { Component } from 'react'
export class UserAccount extends Component {
render() {
return (
<div>
UserAccount
</div>
)
}
}
export default UserAccount
在 App.js 中的路由器中，我將此路由宣告為：
<PrivateRoute path="/my_account" exact component={UserAccount}></PrivateRoute>
而 PrivateRoute 是一個功能組件：
import React from 'react'
import {Route, Redirect} from 'react-router-dom'
import {connect} from 'react-redux'
const PrivateRoute = ({component : Component, auth, ...rest}) => (
<Route {...rest} render={props => {
if(auth.isLoading){
return <h2>LOADING ...</h2>
}
else if(!auth.isAuthenticated){
return <Redirect to="/login"></Redirect>
}
else{
return <Component {...props}/>
}
}}></Route>
)
const mapStateToProps = state =>({
auth: state.auth
})
export default connect(mapStateToProps,null)(PrivateRoute);
我在 auth.js (reducer) 中的狀態：
const initialState = {
access: localStorage.getItem('access'),
refresh: localStorage.getItem('refresh'),
isAuthenticated: null,
isLoading : false,
user: null,
requestSent: false,
payload: null,
message: null
}
并且登錄成功后，狀態變化如下：
switch(type){
case AUTHENTICATED_SUCCESS:
return {
...state,
isAuthenticated: true
}
case LOGIN_SUCCESS:
localStorage.setItem('access', payload.access);
return{
...state,
isAuthenticated: true,
access: payload.access,
refresh: payload.refresh
}
來自 auth.js 操作的登錄功能：
export const login = (email, password) => async dispatch =>{
const config = {
headers: {
'Content-Type': 'application/json'
}
};
const body = JSON.stringify({email, password});
try{
const res = await axios.post(`${process.env.REACT_APP_API_URL}/auth/jwt/create/`, body, config);
dispatch({
type: LOGIN_SUCCESS,
payload: res.data
})
dispatch(load_user());
dispatch(createMessage({logged_in_successfully: "You are now logged in."}))
} catch (err) {
dispatch({
type: LOGIN_FAIL,
payload: err
})
const errors = {msg: err.response.data, status: err.response.status}
dispatch({
type:GET_ERRORS,
payload: errors
})
}
};
感謝您花時間閱讀本文，我希望能得到一些幫助。
uj5u.com熱心網友回復：
import React, { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
export default function UserAccount() {
let navigate = useNavigate();
useEffect(() => {
let authToken = sessionStorage.getItem('access')
// if user is not authed, redirect user to login page
if (!authToken) {
navigate('/login')
}
}, [])
return (
<div>
Home Page
</div>
)
}
答案使用功能組件和反應路由器 v6 。如果您提供您使用的是哪個版本的 react-router，我可以更新我的答案
您忘記添加用于檢查天氣用戶是否已通過身份驗證的條件。為此，您需要檢查 UserAccount 頁面。我提供了片段。條件應該寫useEffect在功能組件里面。內部基于類的組件內部componentDidMount。可以在此處找到有關身份驗證的更多資訊
除此之外，您還應該在Login頁面和Register頁面內添加條件。防止用戶重新注冊和重新登錄。
uj5u.com熱心網友回復：
好吧，我可能找到了解決方案。由于我在商店中設定了一個空值作為默認值，我已經更改了我的 PrivateRoute 代碼來檢查它是否為空，如果是，我們等待渲染或重定向，直到它變為真或假：
import React from 'react'
import {Route, Redirect} from 'react-router-dom'
import {connect} from 'react-redux'
const PrivateRoute = ({component : Component, auth, ...rest}) => (
<Route {...rest} render={props => {
if(auth.isLoading){
return <h2>LOADING ...</h2>
}
else if(auth.isAuthenticated==null){
return <h2>LOADING ...</h2>
}
else if(auth.isAuthenticated==false){
return <h2>Not authenticated ... redirecting here</h2>
}
else{
return <Component {...props}/>
}
}}></Route>
)
const mapStateToProps = state =>({
auth: state.auth,
})
export default connect(mapStateToProps,null)(PrivateRoute);
誰能告訴我這是個好主意還是壞主意？
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/370133.html
標籤：javascript 反应 还原
上一篇：函式不等待反應鉤子