如何将网页上的某些路径限制为管理员?[Rreact，Firebase for auth]

Question

我正在尝试构建一个用于学生管理的web应用程序。在同一应用程序中；路径/admin"；。我想知道如何将访问该页面的权限限制为只有几个用户。

我的想法是取出用户的uid并将其存储在代码中(听起来不安全(。登录时，我用…检查。''if(currentUser.uid==storedAdminUid({path/admin}else{path/student}"；。

我对此持怀疑态度，因为我听说你不应该在前端存储与身份验证相关的代码。救命！

Answer 1

有很多方法可以实现这一点，我特别喜欢Robin Wieruch在他关于将React与Firebase一起使用的精彩文章中提出的方法。但这里有一些与你的问题相关的信息：

import React, { useContext, useEffect } from "react";
import { useHistory } from "react-router-dom";
import * as ROUTES from "../../constants/routes";
import { FirebaseContext } from "../../firebase";
import useAuthUser from "./useAuthUser";
const withAuthorization = condition => Component => {
function WithAuthorization(props) {
const firebase = useContext(FirebaseContext);
const user = useAuthUser();
const history = useHistory();
useEffect(() => {
const releaseAuthListener = firebase.onAuthUserListener(
authUser => {
if (!condition(authUser)) {
history.push(ROUTES.SIGN_IN);
}
},
() => {
history.push(ROUTES.SIGN_IN);
}
);
return () => releaseAuthListener();
}, []);
return condition(user) && <Component {...props} />;
}
return WithAuthorization;
};
export default withAuthorization;

这里我们有withAuthorizationHOC，它基本上将组件封装在访问该组件的条件中。

以下是我们如何使用它：

function AccountPage() {
const authUser = useAuthUser();
if(!authUser) return <h1>User Unknown</h1>
return (
<div>
<h1>Account: {authUser.email}</h1>
{/* <PasswordForgetForm />
<PasswordChangeForm /> */}
</div>
)
}
const condition = authUser => !!authUser;
export default withAuthorization(condition)(AccountPage);

在这里，我们检查用户是否应该通过身份验证才能访问该页面。

function AdminPage() {
// ... IMPLEMENTATION
}    
const condition = authUser => authUser && !!authUser.roles[ROLES.ADMIN];

export default withAuthorization(condition)(AdminPage);

在这里，我们不仅在用户经过身份验证时允许访问，而且在用户获得授权时也允许访问，因为该用户有自己的角色集。

请查看此存储库，在那里您可以查看上下文中的所有内容。阅读罗宾的文章。

此外，我想你可以简化更多，只使用钩子，而不写HOC。