如何更改 node.js 中的链接

Question

我一直在尝试让我的导航栏上的选项卡在用户登录时发生变化（包括 link）。整个事情都是索引页面上的问题，因为您应该在登录和未登录时都输入它。我的导航栏中有一个，其中所有选项卡都通过锚点列出。这是我的app.get的索引：

app.get('/', (req, res)=>{
const {userId} = req.session;
if(userId==undefined){
   
res.render('index');

  }
  else{
   res.render('index');
  }
  });

这是我的 header :

  <nav>
   <div class="logo">Logo</div>
  <div class="openMenu"><i class="fa fa-bars"></i></div>
    <ul class="mainMenu">
       <li><a href="./">Startseite</a></li>
       <li><a href="./login">Anmelden</a></li>
       <li><a href="./registrieren">Registrieren</a></li>
       <li><a href="#">Impressum</a></li>
     </ul>
      <div class="closeMenu"><i class="fa fa-times"></i></div>
   </nav>

我想将“Anmelden”更改为“注销”：

    <li><form id="abmelden" method="POST" action="/logout"><a href="./" onclick="abmelden()">Abmelden</a></form></li>

我想将“Registrieren”更改为“Dashboard”，因此必须更改 a 标签的 link 和文本。

有没有办法，我可以使用像 res.send() 这样的命令来发送取决于用户是否已登录

Answer 1

“制表符”是指更改 html 页面标题？

完成此操作（将其添加到您的模板中）：

<html>
  <head>
    <title>title of the doc</title>
  </head>
  ...
</html>

您可以在模板中添加 if 语句来调整内容。但这取决于您选择的模板引擎

twig 就是这样做的 :

{% if userId %} <h1>im logged as user {{userId}}</h1> {% endif %}

不要忘记像这样在渲染部分添加 userId

res.render('index', {userId});

Answer 2

在您的代码中，您首先检查用户是否登录： if(userId==undefined){

如果 userID 未定义，则表示用户未登录，因此您发送给他们 index.js： res.render('index');

然后你有一个 else 语句，如果用户 is 已登录，但在你的 else 语句中，你发送的内容与你为未登录用户所做的完全相同: else{ res.render('index'); }

因此，如果您想为登录用户提供不同的菜单，您可能需要向他们发送不同的菜单 html。

Answer 3

一种常见的技术是在已登录或未登录的正文标签上动态插入 class。然后，您可以完全使用 CSS.

控制页面的其余部分

您只需在导航栏中同时插入已登录和未登录的选项卡，然后使用 CSS，这样其中一个始终会根据标签中 class 的内容隐藏：

<body class="loggedIn">

或

<body class="notLoggedIn">

然后，您对两者使用相同的页面，但根据标记中的状态使用 CSS 到 hide/show 事物。您在 EJS 中使用条件语句根据登录状态为标记插入正确的 class。

您可以在 index.html 页面中执行此操作，并使用 EJS 条件来动态构造 <body> 标签，其中包含正确的 class：

<body 
<% if (loggedIn) { %> 
 class="loggedIn" >
<%} else { %>
 class="loggedOut" >
<% } %>

我不是 EJS 专家，所以如果这不是完美的 EJS 语法，您可以在此处看到概念。当您呈现模板时，您需要将 loggedIn 布尔值传递给呈现引擎，以便它可以基于此动态调整。

然后，您添加显示或隐藏的 CSS：

/* hide/show based on login status */
.loggedIn .whenLoggedIn, .loggedOut .whenLoggedOut {display: block;}
.loggedOut .whenLoggedIn, .loggedIn .whenLoggedOut {display: none;}

然后，您将两个选项卡都放在导航栏中，<body> 标签中的 class 与您的 CSS 将 hide/show 其中之一

<nav>
  <div class="logo">Logo</div>
  <div class="openMenu"><i class="fa fa-bars"></i></div>
    <ul class="mainMenu">
       <li><a href="./">Startseite</a></li>
       <li class="whenLoggedOut"><a href="./login">Anmelden</a></li>
       <li class="whenLoggedIn"><a href="./logout">Ausloggen</a></li>
       <li><a href="./registrieren">Registrieren</a></li>
       <li><a href="#">Impressum</a></li>
    </ul>
   <div class="closeMenu"><i class="fa fa-times"></i></div>
 </nav>

注意：您也可以使用 EJS 条件来只生成所需的选项卡，因此只生成一个选项卡。但是，此处显示的技术创建了一个 EJS 条件，然后其他一切都只是 HTML/CSS，有些人发现这更易于管理。因此，您可以在页面中有多个位置有 loggedIn 和 notLoggedIn HTML，但它们都在 class/CSS 从一个 EJS 条件生成。

如何更改 node.js 中的链接

How to Change links in node.js

html

javascript

ejs

node.js

express