Question

我想用Express的登录机制开发一个基本的React应用。

这是我到目前为止所拥有的：

server.js

const express = require('express');
const bodyParser = require('body-parser')
const path = require('path');
var session = require('express-session');

const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.use(session({
  secret: 'this my my secret',
  resave: false,
  saveUninitialized: true,
  //cookie: { secure: true }
  cookie: {}
}));

app.get('/login', function (req, res) {
  if (!req.session.authenticated) {
    res.sendFile(path.join(__dirname, 'public', 'login.html'));
  } else {
    res.redirect('/');
  }
});

app.post('/login', (req, res) => {
  req.session.authenticated = true;
  res.redirect('/');
});

app.use(function (req, res, next) {
  if (!req.session.authenticated) {
    return res.redirect('/login');
  }
  next();
});

// app registration
app.use('/', express.static(path.join(__dirname, 'build')));

app.get('/', function (req, res, next) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(process.env.PORT || 3000);

index.html

<html>

<body>

  <head>

    <style>
      ...
    </style>

  </head>

  <body>

    <div class="form center">
      <div class="title">
        Login
      </div>
      <form class="login-form" action="/login" method="post">
        <input type="text" placeholder="Username" autofocus />
        <input type="password" placeholder="Password" />
        <button>login</button>
      </form>
    </div>

  </body>

</html>

我创建了一个纯静态的login.html文件，因为当我尝试将react app登录表单组件与浏览器路由器结合使用时，我不知道如何正确重定向。主要问题是，所有静态内容都必须通过，而如果cookie不存在，则除了“ / login”外，什么都不允许。

你们能看看我的服务器，并给我一些提示，如果我做的好还是不好？

最佳实践基本认证与反应

0 个答案: