[英]User info display error using Firebase web
我试图让我的用户保持登录状态并在登录后显示他们的数据。我收到了当前错误。 我不确定是什么导致了这个错误：
未捕获的语法错误：无法在模块外使用 import 语句
这是我当前的 function 代码。 这是我的 HTML 和 javascript 的所有代码：
HTML：
<!doctype html>
<html>
<head>
<!---Required meta tags--->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/studiodash.css">
<!---Required meta tags--->
<!---Like Button JavaScript--->
<script src="https://kit.fontawesome.com/f6dcf461c1.js" crossorigin="anonymous"></script>
<!---Bootstrap CSS--->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<title>StudioPick</title>
<script>
// SignOut
function signOut() {
auth.signOut();
alert("SignOut Successfully from System");
window.location.href ="login.html?error";
alert("No active user please sign or sign up.");
}
</script>
</head>
<body>
<!---Navbar--->
<header>
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container-fluid">
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-curresnt="page" href="index.html">Home</a>
</li>
<li class="nav-item2">
<div class="action">
<div class="profile" onclick="menuToggle();">
<img src="./assets/avatar.jpg" />
</div>
<div class="menu">
<h3 id="profile-name"><strong>User Name</strong></h3>
<p class="text-muted" id="userType" style="position: relative; top: -20px; right: -51px; font-size: 10px !important">profile type</p>
<ul>
<li>
<img src="./assets/icons/user.png" /><a href="studiodash.html">Dashboard</a>
</li>
<li>
<img src="./assets/icons/edit.png" /><a href="editprofile.html">Edit profile</a>
</li>
<li>
<img src="./assets/icons/envelope.png" /><a href="#">Inbox</a>
</li>
<li>
<img src="./assets/icons/settings.png" /><a href="#">Setting</a>
</li>
<li><img src="./assets/icons/question.png" /><a href="#">Help</a></li>
<li>
<img src="./assets/icons/log-out.png" /><a href="#" onclick="signOut();">Logout</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!---Navbar--->
<!---Dashboard Body--->
<div class="container" id="dashboard">
<h1 class="page-title"><strong>Studio Dashboard</strong></h1>
<!---Booking Calendar--->
<div class="notifications">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Schedule</strong></h5>
</div>
<button class="calendar-view">View Full Calendar</button>
</div>
<!---Booking Calendar--->
<!---Edit Profile--->
<div class="edit-profile" id="edit-profile">
<div class="card-body">
<form id="studioForm">
<h5 class="card-title text-muted"><strong>Edit Profile</strong></h5>
<p class="profile-title" id="studioName"><b>Enter Studio Name</b></p>
<p class="profile-location" id="profile-location">Bethesda, MD</p>
<img class="star" src="Images/Star.png">
<p class="profile-rating" id="profile-rating">4.25</p>
<p class="profile-reviews" id="profile-reviews">8 reviews</p>
<img class="card-img-bottom" id="profile-image" src="Images/placeholder.png">
<button type="button" id="editprofilebutton" onclick="window.location.href='editprofile.html'">Edit Profile</button>
</form>
</div>
</div>
<!---Edit Profile--->
<!---Current Session--->
<div class="session-info">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Current Session</strong></h5>
<div class="current-client">
</div>
<p class="current-date text-muted">Date:</p>
<p class="todays-date">08/30/2022</p>
<p class="current-service text-muted">Service:</p>
<p class="todays-service">W Engineer</p>
<p class="current-room text-muted">Room:</p>
<p class="todays-room">A</p>
<p class="current-duration text-muted">Duration:</p>
<p class="todays-duration">3 hours</p>
<p class="current-start-time text-muted">Start Time:</p>
<p class="todays-start-time">4:00 pm</p>
<p class="current-end-time text-muted">End Time:</p>
<p class="todays-end-time">7:00 pm</p>
</div>
</div>
<!---Current Session--->
<!---Payment History--->
<div class="payment-history">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Payment History</strong></h5>
<div class="transaction">
<p class="customer">- Highway</p>
<p class="payment">+ $1,000</p>
</div>
<div class="transaction-two">
<p class="customer2">- TyFontaine</p>
<p class="payment2">+ $1,000</p>
</div>
<button class="history-view">View Payment History</button>
</div>
</div>
<!---Payment History--->
<!---Upcoming Sessions--->
<div class="sessions">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Upcoming Sessions</strong></h5>
<div class="new-session">
<p class="session-price">$100</p>
<p class="customer-name">Grmln!</p>
<p class="session-room text-muted">Room A: </p>
<p class="session-type text-muted">No Engineer</p>
<p class="session-length text-muted">2:00 pm - 4:00 pm</p>
<p class="session-date text-muted">08/27/2022</p>
</div>
<div class="new-session2">
<p class="session-price2">$100</p>
<p class="customer-name2">Grmln!</p>
<p class="session-room2 text-muted">Room A: </p>
<p class="session-type2 text-muted">No Engineer</p>
<p class="session-length2 text-muted">2:00 pm - 4:00 pm</p>
<p class="session-date2 text-muted">08/27/2022</p>
</div>
<div class="new-session3">
<p class="session-price3">$100</p>
<p class="customer-name3">Grmln!</p>
<p class="session-room3 text-muted">Room A: </p>
<p class="session-type3 text-muted">No Engineer</p>
<p class="session-length3 text-muted">2:00 pm - 4:00 pm</p>
<p class="session-date3 text-muted">08/27/2022</p>
</div>
<button class="upcoming-view">View Upcoming Sessions</button>
</div>
</div>
<!---Upcoming Sessions--->
<!---Session Status--->
<div class="session-status">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Session Status</strong></h5>
<div class="session-option">
<button class="accept-button">Accept</button>
<button class="reject-button">Reject</button>
<button class="change-button">Change Time/Date</button>
</div>
</div>
</div>
<!---Session Status--->
<!---Pending Sessions--->
<div class="pending-sessions">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Pending Sessions</strong></h5>
<div class="pending">
<p class="pending-session-price">$100</p>
<p class="pending-customer-name">Joony</p>
<p class="pending-session-room text-muted">Room A: </p>
<p class="pending-session-type text-muted">No Engineer</p>
<p class="pending-session-length text-muted">2:00 pm - 4:00 pm</p>
<p class="pending-session-date text-muted">08/27/2022</p>
</div>
</div>
<div class="pending2">
<p class="pending-session-price2">$100</p>
<p class="pending-customer-name2">Tae Dawg</p>
<p class="pending-session-room2 text-muted">Room D: </p>
<p class="pending-session-type2 text-muted">With Engineer</p>
<p class="pending-session-length2 text-muted">2:00 pm - 4:00 pm</p>
<p class="pending-session-date2 text-muted">09/27/2022</p>
</div>
<button class="pending-view">View Pending Sessions</button>
</div>
</div>
<!---Pending Sessions--->
<!---Edit Prices--->
<div class="edit-prices">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Edit Prices</strong></h5>
<div class="roomA">
<p class="description-one">Room A:</p>
<p class="type text-muted">With Engineer</p>
<p class="dollarsign-one">$</p>
<p class="price-one">45</p>
<p class="time-type">/Hr</p>
</div>
<div class="roomB">
<p class="description-two">Room B:</p>
<p class="type2 text-muted">With Engineer</p>
<p class="dollarsign-two">$</p>
<p class="price-two">50</p>
<p class="time-type2">/Hr</p>
</div>
<button class="editPrice-button">Edit Prices</button>
</div>
</div>
<!---Edit Prices--->
<!---Messages--->
<div class="messages">
<div class="card-body">
<h5 class="card-title text-muted"><strong>Messages</strong></h5>
<div class="notification-one">
<p class="person-one">Chris Brown</p>
<p class="text-one text-muted">I'm omw. 20 mins out. I ran into some traffic bc of this real bad accident. If I don't get there in time, I'll pay extra. </p>
<p class="time-occurred-one text-muted">3 min ago</p>
</div>
<div class="notification-two">
<p class="person-two">Kanye West</p>
<p class="text-two text-muted">I'm omw. 45 mins out. I ran into some traffic bc of this real bad accident. If I don't get there in time, I'll pay extra. </p>
<p class="time-occurred-two text-muted">12 min ago</p>
</div>
<button class="view-messages">View Messages</button>
</div>
</div>
<!---Messages--->
<!---Footer--->
<footer class="my-5 pt-5 text-muted text-center text-small">
<p class="mb-1">© 2022 StudioPick.</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Privacy</a></li>
<li class="list-inline-item"><a href="#">Terms</a></li>
<li class="list-inline-item"><a href="#">Support</a></li>
</ul>
</footer>
<!---Footer--->
<!---Dashboard Body--->
<script>
function menuToggle() {
const toggleMenu = document.querySelector(".menu");
toggleMenu.classList.toggle("active");
}
</script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
<!---Javascript--->
<script src="Javascript/studiodash.js"></script>
<!---Javascript--->
<!----More Bootstrap--->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<!----More Bootstrap--->
</body>
</html>
JS：
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Initialize variables
const database = firebase.database();
import { getAuth, onAuthStateChanged } from "firebase/auth";
const auth = getAuth();
onAuthStateChanged(auth, (user) => {
if (user) {
database.ref('/studiopick/studio/users/' + user.uid).get().then(snapshot =>{
document.getElementById("studioName").innerText = snapshot.val().studioName;
document.getElementById("profile-name").innerText = snapshot.val().studioName;
}).catch(e => {console.log(e)})
// ...
} else {
window.location.href ="login.html?error";
alert("No active user please sign or sign up.");
}
});
您实际上是在混合 JS SDK 版本 8 和 9。
使用<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>导入 V8 SDK，
但以下代码是 V9 语法
const auth = getAuth();
onAuthStateChanged(auth, (user) => {...});
以下代码是 V8 语法...
database.ref('/studiopick/studio/users/' + user.uid).get()...
您可以继续使用 SDK V8，如下所示：
const firebaseConfig = {
//...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
//const auth = getAuth();
firebase.auth().onAuthStateChanged((user) => {
if (user) {
database.ref('/studiopick/studio/users/' + user.uid).get().then(snapshot => {
document.getElementById("studioName").innerText = snapshot.val().studioName;
document.getElementById("profile-name").innerText = snapshot.val().studioName;
}).catch(e => { console.log(e) })
// ...
} else {
window.location.href = "login.html?error";
alert("No active user please sign or sign up.");
}
});
// ....
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use -->
<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>
<!---Javascript--->
<script defer src="Javascript/studiodash.js"></script>
<!---Javascript--->
<!----More Bootstrap--->
// ...
<!----More Bootstrap--->
</body>
</html>
或者改成V9，推荐的，如下：
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.9.4/firebase-app.js';
// Add Firebase products that you want to use
import { getAuth, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/9.9.4/firebase-auth.js';
import { getDatabase, ref, get } from "https://www.gstatic.com/firebasejs/9.9.4/firebase-database.js"
const firebaseConfig = {
//...
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const database = getDatabase(app);
onAuthStateChanged(auth, (user) => {
if (user) {
// See documentation for V9
// https://firebase.google.com/docs/database/web/read-and-write#read_data_once
// ...
} else {
window.location.href = "login.html?error";
alert("No active user please sign or sign up.");
}
});
// ...
<!---Javascript--->
<script type="module" src="Javascript/studiodash.js"></script>
<!---Javascript--->
<!----More Bootstrap--->
// ...
<!----More Bootstrap--->
</body>
</html>
文档中的更多详细信息：
如何使用 Firebase 身份验证保持用户登录 Flutter web 应用程序
[英]How to keep a user logged in Flutter web app using Firebase Authentication
使用 firebase.User 方法从 firebase angular 项目获取登录用户的用户名时出错
[英]Getting error while using firebase.User method to get username of logged in user from firebase angular project
如何检索当前从 Firestore/Firebase 登录的用户信息？
[英]How to retrieve the user's info that is currently logged in from Firestore/Firebase?
使用 Apple ID 登录 Firebase 时出现错误“invalid_request: Invalid web redirect url”
[英]Getting error "invalid_request: Invalid web redirect url" when using Apple ID sign-in with Firebase
如何将 Firebase 格式错误显示为警报并将其显示给用户？
[英]How do i display Firebase formatting errors as an Alert and display it to the user?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.