javascript - 使用NodeJS和express登录成功后如何显示用户信息

问题描述

我使用 Cloud Firestore 作为我的数据库，所有前端都是 HTML、CSS、JS，我正在处理后端部分。我成功构建了 2 个注册功能（用于医生和患者）和登录（所有用户一次登录）。成功登录后，项目需要导航到 2 个页面/路线。医生仪表板（如果是正在登录的医生）和患者仪表板（如果是患者）。我正在使用用户的用户名登录。问题是我不知道如何在仪表板页面上显示用户名（不是用户名，这是一个不同的属性）。成功登录后，用户信息应该来自数据库，我需要在登录后请求重定向到的 HTML 页面上显示。我也在共享仪表板页面的登录和注册功能以及 HTML 代码。请帮忙。

index.js

const express = require('express')
const cors = require('cors');
const config = require('./config');
const path = require('path');
const firebase = require('firebase');
const routes = require('./routes');

const app = express();
app.use(express.urlencoded({extended: true}));
app.use(express.json());
app.use(express.static(path.join(__dirname, "/")));
var fb = firebase.initializeApp(config.firebaseConfig);
var db = firebase.firestore(fb);

app.use('/', routes)
app.listen(process.env.port || 3000);
console.log("Running at port 3000")

app.post('/register-patient', (req, res) => {
  var name = req.body.name;
  var username = req.body.username;
  var email = req.body.email;
  var password = req.body.password;

  db.collection('users').doc(username).set({
    name: name,
    email: email,
    username: username,
    password: password,
    category: "patient"
  })
  .then(() => {
      console.log("Document written with ID: ", username);
      res.redirect('/patient-dashboard.html')
  })
  .catch((error) => {
      console.error("Error adding document: ", error);
  })
})

app.post('/login', (req, res) => {
  var username = req.body.username;
  var password = req.body.password;

  var docRef = db.collection("users").doc(username);
  docRef.get().then((doc) => {
    if (doc.exists) {
      var info = doc.data();
      if (info.password === password) {
        var category = info.category;
        if (category === 'doctor') {
          res.send(username);
          res.redirect('/doctor-dashboard.html');
        } else {
          res.redirect('/patient-dashboard.html');
        }
      } else {
        console.log("Wrong password");
      }
    } else {
      console.log("No such document");
    }
  }).catch((err) => {
    console.error(err)
  })
})

路由.js

const express = require('express');
const router = express.Router();
const path = require('path');

router.get('/', (req, res) => {
  res.sendFile(path.join(__dirname + '/index.html'))
});

router.get('/login.html', (req, res) => {
  res.sendFile(path.join(__dirname + '/login.html'))
});

router.get('/register.html', (req, res) => {
  res.sendFile(path.join(__dirname + '/register.html'))
});

router.get('/doctor-register.html', (req, res) => {
  res.sendFile(path.join(__dirname + '/doctor-register.html'))
})

router.get('/doctor-dashboard.html', (req, res) => {
  res.sendFile(path.join(__dirname + '/doctor-dashboard.html'))
})

router.get('/patient-dashboard.html', (req, res) => {
  res.sendFile(path.join(__dirname + '/patient-dashboard.html'))
})

module.exports = router

患者仪表板.html

<!DOCTYPE html> 
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>AARC-PLUS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <!-- Favicons -->
    <link href="assets/img/favicon.png" rel="icon">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- Fontawesome CSS -->
    <link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
    <!-- Main CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
    <a name="home"></a>
    <!-- Main Wrapper -->
    <div class="main-wrapper">
        <!-- Header -->
        <script src="assets/js/header-patient.js"></script>
        <!-- /Header -->
            
        <!-- Page Content -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    
                    <!-- Profile Sidebar -->
                    <div class="col-md-5 col-lg-4 col-xl-3 theiaStickySidebar">
                        <div class="profile-sidebar">
                            <div class="widget-profile pro-widget-content">
                                <div class="profile-info-widget">
                                    <a href="#" class="booking-doc-img">
                                        <img src="assets/img/patients/patient.jpg" alt="User Image">
                                    </a>
                                    <div class="profile-det-info">
                                        <h3 name="name">Richard Wilson</h3>
                                        <div class="patient-details">
                                            <h5><i class="fas fa-birthday-cake"></i> 24 Jul 1983, 38 years</h5>
                                            <h5 class="mb-0"><i class="fas fa-map-marker-alt"></i> Newyork, USA</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>

我没有在此处粘贴整个 HTML 代码，因为它太长了，我认为最好指出我想要修改的确切位置。我<h3 name="name">Richard Wilson</h3>想根据用户的信息对其进行修改。

如果您需要更多代码，请告诉我。

标签： javascriptnode.jsfirebaseexpress

javascript - 使用NodeJS和express登录成功后如何显示用户信息

问题描述

解决方案

推荐阅读