在服务器端呈现 Express/React 应用程序上使用 passport-jwt

Posted 2023-02-21

【中文标题】在服务器端呈现 Express/React 应用程序上使用 passport-jwt

【英文标题】：Use passport-jwt on server side rendered Express/React app

【发布时间】：2017-10-13 16:59:13

【问题描述】：

我有一个使用 react-router 的通用 NodeJS、Express、React/Redux 应用程序。它在应用程序的初始请求时从服务器端呈现，在来自 react-router 的后续请求时在客户端呈现。

我的 routes.js 文件：

<Route path="/" component=App>
    <Route path="/main" component=Main/>
    <Route path="/login" component=Login/>
</Route>

我有一个通配符快速路由匹配这个 react-routes 并将组件标记发送回模板：

import routes from '../routes';

app.get('*', (req, res) => 
    match(
         routes, location: req.url ,
        (err, redirectLocation, renderProps) => 
            let markup;
            if (renderProps) 
                markup = renderToString(
                    <Provider store=store>
                        <RouterContext ...renderProps/>
                    </Provider>
                );
             else 
                markup = renderToString(<NotFoundPage/>);
                res.status(404);
            

            return res.render('index',  markup );
        
    );
);

现在我想用passport-jwt保护通配符路由截获的一些路由，比如例子：

app.get("*", passport.authenticate('jwt',  session: false ), 
(req, res) => 
    match(
         routes, location: req.url ,
            (err, redirectLocation, renderProps) => 
                res.json("Success! You can not see this without a token");
            
    )
);

如何在通配符路由上仅保护给定路由免受 routes.js 的影响？

【参考方案1】：

您可以通过app.use 添加一些中间件来执行此操作。 (https://expressjs.com/en/4x/api.html#app.use)

请务必在通配符处理程序之前调用它

app.use("/main", passport.authenticate('jwt',  session: false ), 
function(req, res)
    res.json("Success! You can not see this without a token");
);

【讨论】：

实际上我想在服务器端渲染时对我的通配符路由进行选择性保护。你知道在这种情况下如何使用中间件吗？

假设（只是一个例子）你想用你的令牌认证中间件保护/admin后面的任何东西。为此，您将在声明通配符处理程序之前使用app.use('admin', passport.authenticate('jwt', session: false )。中间件函数是按顺序执行的，因此中间件包含的顺序很重要。

这里有一个更深入的例子 - github.com/scotch-io/easy-node-authentication/blob/local/…