我正在使用带 hooks、react-redux 和 redux-thunk 的 React,我不确定我是否正确进行了身份验证。在 Main.js 中,我调用一个名为 checkIfLoggedIn()
的操作。这是 Main.js 内容:
class Main extends React.Component {
constructor(props) {
super(props);
this.props.checkIfLoggedIn();
}
render() {
return (
<BrowserRouter>
<div style={{position: 'relative'}}>
<Navbar/>
<div className={'container-fluid'}>
<Route exact path={'/'} component={(Dashboard)}/>
<Route exact path={'/sale'} component={(Sale)}/>
<Route exact path={'/settings'} component={(Settings)}/>
<Route exact path={'/login'} component={(Login)}/>
</div>
</div>
</BrowserRouter>
)
}
}
const mapDispatchToProps = {
checkIfLoggedIn
};
export default connect(null, mapDispatchToProps)(Main);
这是checkIfLoggedIn()
的代码
import {SET_ADMIN, SET_LOGGED_IN} from "./types";
import axios from 'axios';
export const checkIfLoggedIn = () => async dispatch => {
const adminToken = window.localStorage.getItem('admin_token');
if (adminToken === null)
dispatch({
type: SET_LOGGED_IN,
payload: false
});
else {
try {
const r = await axios.get('/users/me');
const data = r.data;
dispatch({
type: SET_ADMIN,
payload: data
});
dispatch({
type: SET_LOGGED_IN,
payload: true
});
} catch (e) {
dispatch({
type: SET_LOGGED_IN,
payload: false
});
}
}
};
我的初始状态:
const initialState = {
isLoggedIn: false,
currentAdmin: {
},
};
现在,我想制作一个 ProtectedRoute,当我未登录时,它会将我重定向到登录路由。我想在登录组件中制作类似的东西,它将我重定向到 '/'
路线(如果我已登录)。
但在这两种情况下,我的属性 isLoggedIn 最初设置为 false,并在几毫秒后更新。这是我的登录组件代码,未按预期工作:
const Login = props => {
const dispatch = useDispatch();
const [redirect, setRedirect] = useState(false);
dispatch(checkIfLoggedIn());
useEffect(() => {
setRedirect(props.isLoggedIn);
}, [props.isLoggedIn]);
return redirect ? <Redirect to={'/'} /> : (
/* the login form code */
)
}
表单显示了一会儿,然后我被重定向到主路线。如何防止显示表单?如何让 PrivateRoute 等待一段时间以接收所有 Prop 并获取初始 isLoggedIn 状态?
最佳答案
不确定我完全理解你正在做的事情的背景,但这是我的想法。在您的 useEffect 中, isLoggedIn bool 值似乎正在控制重定向 bool 值,这可能会导致不需要的副作用。
试试这个
const Login = props => {
const dispatch = useDispatch();
const [redirect, setRedirect] = useState(false);
dispatch(checkIfLoggedIn());
useEffect(() => {
// If user is not logged in, redirect them
if (!props.isLoggedIn) {
setRedirect(true)
}
}, [props.isLoggedIn]);
return redirect ? <Redirect to={'/'} /> : (
/* the login form code */
)
}
如果您使用的是react-router,并且使用 withRouter
高阶组件导出此组件,则最好使用 history.push
来实现您的目的试图完成
const Login = props => {
const dispatch = useDispatch();
const [redirect, setRedirect] = useState(false);
dispatch(checkIfLoggedIn());
useEffect(() => {
// If user is not logged in, redirect them
if (!props.isLoggedIn) {
props.history.push('/redirectRoute')
}
}, [props.isLoggedIn]);
return redirect ? <Redirect to={'/'} /> : (
/* the login form code */
)
}
关于javascript - React Redux with hooks - 身份验证和 protected 路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60777283/