Перенаправление страницы входа в зависимости от роли пользователя с использованием javascript и firebase

Question

То, что я пытаюсь сделать sh, - это создать логин пользователя, используя html / javascript с firestore в качестве моего бэкэнд-провайдера. В настоящее время мой код возвращает ошибку

Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'uid' из неопределенного

TypeError: Невозможно прочитать свойство 'uid' из неопределенного

Я понимаю, что get () требует времени для запуска, поэтому я использовал функцию then () как обещание, когда get () работает. На данный момент единственное, что работает, это

 const userCredential = await firebase.auth().signInWithEmailAndPassword(data.email, data.password);

, потому что в журнале консоли отображается firebase.auth().onAuthStateChanged(), но перенаправление на любую страницу, основанную на пользователе (в зависимости от его занятости), не происходит, поскольку uid не может быть найденным.

вот мой. js код

(function(){//initialize the firebase app
    var config = {

        }; 

        firebase.initializeApp(config);
        var auth = null;
        var loginBtn= document.getElementById('btnLogin');
        // var user = db.collection("users");
        // var db = firebase.firestore();
        firebase.auth.Auth.Persistence.SESSION;

    //Login
    loginBtn.addEventListener('click', async e => {
        e.preventDefault();
        if( $('#email').val() != '' && $('#password').val() != '' ){
        //login the user
        var data = {
            email: $('#email').val(),
            password: $('#password').val()
        };

    try{
        const userCredential = await firebase.auth().signInWithEmailAndPassword(data.email, data.password);
        let uid = userCredential.user.uid;
        var documents = await firebase.firestore().collection('users').doc(uid);
        documents.get().then(function(doc){
            if(doc.data['occupation'] != 'Doctor'){
                window.location.href = "patientDashboard.php"; 
            }
            else {
                window.location.href = "doctorDashboard.php";  
            }
        });
    } 
        catch(err) {
            console.log("Login Failed!", err);
            window.alert("Login Failed!", err);
        }
    }
});
})();

Надеюсь, я все объяснил, спасибо заранее!

Answer 1

Я не уверен, что эта строка

firebase.auth().signInWithEmailAndPassword(data.email, data.password); //this will work

на самом деле работает, потому что, как говорят документы здесь , этот метод является асинхронным, поэтому он возвращает Обещание. Вам нужно будет использовать что-то вроде этого:

const userCredential = await firebase.auth().signInWithEmailAndPassword(data.email, data.password);
let uid = userCredential.user.uid;
// do stuff

Итак, мы ожидаем результата функции signIn, а затем используем возвращаемое значение.

Кроме того, так как мы При использовании await лямбда-функция, назначенная в качестве прослушивателя событий, должна быть объявлена ​​async.

//Login
loginBtn.addEventListener('click', async (e) => {
        e.preventDefault();
        ...

Answer 2

Это ответ на мою проблему с перенаправлением, он заключается в исправлении кода запроса в коде try{}.

try{
    const userCredential = await firebase.auth().signInWithEmailAndPassword(data.email, data.password);
    let uid = userCredential.user.uid;
    var document = await firebase.firestore().collection("users").doc(uid).get();
    //document is a DocumentSnapshot, we can call the get() method
    if (document.get('occupation') != 'Doctor'){
       window.location.href = "patientDashboard.php"; 
    }
    else {
       window.location.href = "doctorDashboard.php";  
    }                   
}    
catch(err){
    console.log("Login Failed!", err);
    window.alert("Login Failed!", err);
}

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ

Будьте в курсе что с этим кодом вы НЕ внедряете подлинную систему контроля доступа на основе ролей. Это просто код для академического c требования, которое я сейчас разрабатываю и никоим образом не используется для развертывания на каких-либо клиентах. Вы просто перенаправляете user на основании значения в его пользовательском документе. Кто-то может легко перепроектировать ваше приложение и перенаправить на неправильную страницу.

Полный кредит Renaud Tarne c за исправление ошибки!