Блог

Я пытаюсь создать веб-приложение для управления студентами. В том же приложении есть раздел «путь / администратор». Я хочу знать, как мне ограничить доступ к этой странице только для нескольких пользователей.

Моя идея заключается в том, что я извлекаю uid пользователя и сохраняю его в коде (звучит небезопасно). При входе в систему я проверяю его с помощью …. «if(CurrentUser.uid === storedAdminUid) {path / admin} else {path / student}».

я скептически отношусь к этому, потому что слышал, что вы не должны хранить код, связанный с авторизацией, во внешнем интерфейсе. HELPPPP!

Есть много способов, как вы можете этого добиться, мне особенно нравится тот, который предложил Робин Вирух в своей удивительной статье об использовании 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) amp;amp; <Component {...props} />;
  }

  return WithAuthorization;
};

export default withAuthorization;
  

Здесь у нас есть withAuthorization HOC, который в основном обертывает компонент в условие для доступа к этому компоненту.

Вот как мы можем это использовать:

 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 amp;amp; !!authUser.roles[ROLES.ADMIN];
    
export default withAuthorization(condition)(AdminPage);
  

Здесь мы разрешаем доступ не только при аутентификации пользователя, но и при авторизации пользователя, поскольку для этого пользователя установлена определенная роль.

Пожалуйста, взгляните на этот репозиторий, где вы можете увидеть все в контексте. И прочитайте оригинальную статью Робина.

Также, я думаю, вы можете упростить еще больше, просто использовать хуки, не записывая HOC.