我想允许访问“用户”页面,该页面显示所有在网站上注册的用户,仅当该用户为admin时
这是页面的组成部分:
<Route path="/users" exact component={Users} />
我尝试了类似的方法,但是没有用:
Router.js
<AdminRoute path="/users" exact component={Users} />
AdminRoute/index.js
import React,{ useEffect,useState } from "react";
import { Route,Redirect } from "react-router-dom";
import axios from "axios";
import M from "materialize-css";
import { connect } from "react-redux";
function AdminRoute({ component: Component,auth,...rest }) {
const [user,setUser] = useState(false);
async function loadUser() {
try {
const dataUser = await axios.get(
`http://localhost:5000/api/users/my-account/${auth.user.id}`
);
setUser(dataUser.data);
console.log("user ",user); <-- returns well an object with isAdmin =
true
M.AutoInit();
} catch (error) {
console.log(error);
}
}
useEffect(() => {
if (auth.isAuthenticated) {
loadUser();
}
},[]);
return (
<Route
{...rest}
render={props =>
auth.isAuthenticated && user.isAdmin ? (
<Component {...props} />
) : (
<Redirect to="/" />
)
}
/>
);
}
const mapstatetoProps = state => ({
auth: state.auth
});
export default connect(mapstatetoProps)(AdminRoute);
主要问题是,如果在使用管理员帐户时由于用户仍然为假而被重定向,那么我需要找到一种仅在loaduser功能完成后呈现组件的方法吗?