Question

我有一个 ReactJS 应用程序，其中 axios 运行在 NodeJS 后端之上。我还有一个本地 Keycloak 服务器来启用单点登录 (sso) 和身份验证。

在 NodeJS 后端，我将 Keycloak Adapter 配置为：

(...other imports...)
const session = require('express-session');
const Keycloak = require('keycloak-connect');

const CONFIG = {
    apiRoot: 'http://localhost:8033',
    serverPort: '3000'
}

const loadSpringConfig = async () => { (... do something unrelated...) }

Promise.all([loadSpringConfig()]).then(() => {
    const server = express()

    const memoryStore = new session.MemoryStore();

    // Using json config downloaded from keycloak client
    let keycloak = new Keycloak({
        store: memoryStore
    });

    // In memory session
    server.use(session({
        secret: 'extremely-secret',
        resave: false,
        saveUninitialized: false,
        store: memoryStore
    }));

    server.use(keycloak.middleware({}));
    server.use(compression())
    server.use(cookieParser())
    server.use(bodyParser.json({ limit: '50mb' }))
    server.use(bodyParser.urlencoded({ limit: '50mb', extended: true }))

    server.get('/health', (req, res) => {
        res.send("{ healthy: true }")
    })

    server.get('/secure', keycloak.protect('user'), function (req: any, res: any) {
        let keycloakToken = JSON.parse(req.session['keycloak-token']);
        let accessToken = keycloakToken.access_token;
        
        res.send(accessToken);
    });

    server.get('/config', (req, res) => {
        res.json(CONFIG)
    })

    server.use(express.static(path.join(__dirname, 'build')))

    server.get('/', (req, res) => {
        res.sendFile(path.join(__dirname, 'build', 'index.html'))
    })

    server.listen(CONFIG.serverPort, (err: Error) => {
        if (err) {
            throw err
        }
        console.log(`> Ready on http://localhost:${CONFIG.serverPort}, using api at: ${CONFIG.apiRoot}`)
    })
})

这是按预期工作的，当浏览器转到 localhost:3000/secure 时，它被重定向到我的 keycloak 登录页面。成功登录后，浏览器将重定向回我的 /secure 端点，响应正文中包含用户的访问令牌。这一切都在 NodeJS 中。

我现在的问题是应该以某种方式通知 ReactJS 有来自 keycloak 的有效令牌，并在 Axios http 客户端上使用它来将经过身份验证的请求发送到在云服务器上运行的不同后端服务。

我是前端开发的新手。将令牌从 NodeJS 后端传递到在用户浏览器上运行的 ReactJS 前端应用程序以便它可以被 Axios 检索（将所有 http 请求发送到外部 api）的最佳方法是什么？

将 Keycloak 身份验证令牌从 NodeJS 传递到 React 应用程序

0 个答案: