isomorphic应用程序中的用户配置文件

时间:2017-06-06 13:14:53

标签: javascript node.js reactjs authentication isomorphic-javascript

我目前正在使用React,Redux,Express和Node向网站添加登录以及一系列与登录相关的高级功能。对于实际登录,我使用Passport,Facebook,Google和Twitter策略。获取所需令牌后,会将其发送到AWS Cognito Federated Identities以获取用户的同步数据。无论何时需要,网站上的数据也会同步回Cognito。

用户登录后,我可以在节点服务器上构建完整的用户配置文件,但现在是什么?

// server.jsx
// imports
.............

// variables
.............

var userProfile;
// logging the user with Passport and adding it to the profile
.............

app.use((req, res) => {
    // I can do whatever I want with the profile here
    .............

    // handling the request and creating an initial state ..
    .............
}

回到过去,使用会话变量(Java / C#)或cookie(JS)可以很容易地解决这个问题,但在同构应用程序中,它并不那么简单。让我们说用户在登录后通过路由访问profile.jsx:cookie(通过客户端会话设置)仅在客户端运行jsx文件时可用;无论何时服务器呈现,都无法访问它。

即使使用isomorphic-cookie或universal-cookie之类的东西,似乎也需要自定义代码,这几乎违背了同构应用程序的目的。我还想过使用Redux,但Redux似乎只在Node上有一个初始状态,这对它没什么帮助。

// Profile.jsx
import React , { Component } from 'react';
import Cookies from 'universal-cookie';

class Profile extends Component {
    // Stuff
    .............

    render() {
        // Would love to be able to access to the profile without custom code like this
        if (typeof window != 'undefined' && window.document) {
            const cookies = new Cookies();
            console.log(cookies.get('user'));
        }
    }

那么是否有一种顺畅的方式来处理您希望随时访问的用户配置文件或其他变量,而无需为每个方案编写大量自定义代码?似乎大多数教程和示例都只在服务器或客户端上处理这类事情,这需要在这种特殊情况下重新编写网站。

在大多数情况下,同构应用程序相当直接,但是当引入身份验证,配置文件等时,复杂性确实会突然出现,所以我非常感谢有关此事的任何反馈。

1 个答案:

答案 0 :(得分:0)

我认为这里的一个常见方案是添加身份验证步骤,然后将成功的身份验证令牌存储为Cookie或处于您在后续查询中提供回配置文件API的应用状态。

从您的API返回的任何数据也可以添加到Redux存储中,这样您始终可以访问它并随后在需要保留更改或者强制更新当前状态数据时进行更新。