Nodejs求助，关于登录后显示用户名问题，我想请教一下

Nodejs求助，关于登录后显示用户名问题，我想请教一下

我现在登录后，用户信息保存在session里， 然后每个页面都要显示用户名，这块区域是在页面最上方的， 我要怎么做合理呢，还是每个页面都从session里往前端传

4 回复

Node.js求助：关于登录后显示用户名问题

问题描述：

我目前使用的是Express框架，并且已经实现了用户登录功能。用户的登录信息保存在Session中。现在，我希望在每个页面的顶部显示当前登录用户的用户名。为了实现这一目标，我需要考虑如何将用户名传递给前端页面。

解决方案：

  1. 中间件处理 我们可以创建一个中间件来检查每个请求是否包含用户信息（即Session中的用户名），并将用户名传递给视图引擎。这样，我们就不需要在每个页面模板中单独处理这个逻辑了。

  2. 示例代码

    • 首先，确保你已经在项目中安装了express-session模块，并正确配置了Session：

      npm install express-session

    • 然后，在你的Express应用中添加一个中间件来处理Session中的用户名，并将其传递给视图引擎：

      const express = require('express');
const session = require('express-session');

const app = express();

// 配置Session
app.use(session({
  secret: 'your_secret_key',
  resave: false,
  saveUninitialized: true
}));

// 中间件：获取Session中的用户名并传递给视图
app.use((req, res, next) => {
  res.locals.username = req.session.username;
  next();
});

// 假设你使用的是EJS作为视图引擎
app.set('view engine', 'ejs');

// 示例路由
app.get('/', (req, res) => {
  res.render('index', { username: res.locals.username });
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

    • 在你的EJS模板文件中，你可以直接访问res.locals.username变量：

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <% if (username) { %>
        <div>欢迎，<%= username %>!</div>
    <% } else { %>
        <div>未登录</div>
    <% } %>
    <!-- 页面其他内容 -->
</body>
</html>

通过这种方式，你只需要在一个地方设置中间件，就可以在所有页面上显示登录用户的用户名，而不需要在每个页面模板中重复相同的逻辑。


前端用AJAX呗，不要跳转URL。 如果你要SEO，那就每个页面渲染的时候往前端传就是了

写一个 dynamicHelper。

如果你用 express 的话，就写一个全局中间件，每次有访问都将 res.locals.current_user 赋值为 req.session.user，这样就可以在 view 中直接使用 current_user 了。

为了实现登录后在页面顶部显示用户名的功能，你可以利用中间件来处理这个逻辑。这样可以避免在每个页面中重复地从 session 中获取用户名并传递给前端。

示例代码

  1. 安装依赖 确保你已经安装了 express-session 这个中间件：

    npm install express-session

  2. 配置中间件 在你的 Express 应用中设置 session 和中间件：

    const express = require('express');
const session = require('express-session');

const app = express();

// 设置 session 中间件
app.use(session({
  secret: 'your-secret-key', // 用于加密 session ID 的密钥
  resave: false,
  saveUninitialized: true
}));

// 创建一个中间件来设置用户名到 req 对象
function setUserName(req, res, next) {
  req.userName = req.session.userName || '';
  next();
}

// 使用中间件
app.use(setUserName);

  3. 登录逻辑 登录时，将用户名保存到 session 中：

    app.post('/login', (req, res) => {
  const { username } = req.body;
  req.session.userName = username;
  res.redirect('/');
});

  4. 渲染模板 在页面顶部渲染用户名：

    app.get('/', (req, res) => {
  res.send(`
    <html>
      <head><title>Home</title></head>
      <body>
        <div id="user-info">Welcome, ${req.userName}</div>
        <!-- 其他页面内容 -->
      </body>
    </html>
  `);
});

解释

  • 中间件：通过创建一个中间件 setUserName，我们可以在每次请求时自动将用户名添加到 req 对象中。这使得在后续的路由处理函数中可以直接访问用户名。

  • 登录后：当用户登录时，我们将用户名存储在 req.session 中。这样，即使用户刷新页面或导航到其他页面，用户名仍然可以通过 session 获取。

  • 渲染页面：在需要显示用户名的地方（例如页面顶部），只需访问 req.userName 即可。这种方式简化了代码，并且避免了在每个路由中重复获取 session 信息的过程。

这种方法不仅提高了代码的可维护性，还确保了所有页面都能正确显示用户名。

回到顶部