快速路由器重定向后反应路由器未显示正确的组件 - OAuth

时间:2021-03-22 03:33:03

标签: javascript node.js reactjs express react-router

目前,我正在使用 Discord OAuth 登录来测试我的应用程序。这是当前的流程:

Root: '/' 我有一个链接到“/auth”的标签

Auth: '/auth' 发送用户取消 OAuth 登录,成功后将用户重定向到 '/profile'

Profile: '/profile' 显示“OK”,但前端设置了 React Router 以显示组件

App.jsx

const App = () => {
  return (
    <div>
      <a href='/auth'>Test</a>
      <Switch>
        <Route path='/profile' component={Profile} exact />
      </Switch>
    </div>
  );
};

server.js

require('dotenv').config();
require('./strategies/discordStrategy');
const path = require('path');
const express = require('express');
const passport = require('passport');
const session = require('express-session');
const db = require('./database/database');
const app = express();
const PORT = process.env.PORT || 3000;

// Serve Public Directory For React
const publicDirectory = path.join(__dirname, '../client/dist');

app.use(express.json());
app.use('/', express.static(publicDirectory));

// Database
db.then(() => console.log('MongoDB is connected')).catch((err) =>
  console.log(err)
);

// Routes
const authRoute = require('./routes/auth');
const profileRoute = require('./routes/profile');

app.use(
  session({
    secret: 'some random secret',
    cookie: {
      maxAge: 60000 * 60 * 25,
    },
    resave: false,
    saveUninitialized: false,
  })
);

// Passport
app.use(passport.initialize());
app.use(passport.session());

// Middleware
app.use('/auth', authRoute);
app.use('/profile', profileRoute);

app.listen(PORT, () => console.log(`Express is running on port ${PORT}`));

profile.js

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

function isAuthorized(req, res, next) {
  if (req.user) {
    next();
  } else {
    res.redirect('/auth');
  }
}

router.get('/', isAuthorized, (req, res) => {
  res.sendStatus(200);
});

module.exports = router;

浏览器显示它是从“res.sendStatus(200)”得到的“OK”,那么这是否覆盖了 React Router?组件“配置文件”应该显示“测试页面”。

0 个答案:

没有答案