使用 Redux 验证用户的流程 [关闭]答案

【问题标题】：Flow for authenticating user with Redux [closed]使用 Redux 验证用户的流程 [关闭]
【发布时间】：2015-11-17 15:28:22
【问题描述】：

Redux 组织客户端用户认证代码的方式是什么？

也很想了解如何将 Facebook 登录最好地集成到 Redux 中。

【问题讨论】：

虽然这不是答案，但您可能会发现此示例项目很有帮助：github.com/andrewngu/sound-redux（具有身份验证的 SoundCloud 客户端）
本文还有一些很棒的技巧：medium.com/@MattiaManzati/…
谢谢@DanAbramov！
@Gixty Redux 存储只是内存中的一个对象。如果你需要持久化它，你需要把它放在持久化的地方。
“最佳实践”=“意见”，通常。

标签： javascript reactjs facebook-login redux

【解决方案1】：

在我的示例项目中，我只保留了一个 authed 减速器来处理所有经过身份验证的用户数据。初始状态和 reducer 如下所示：

const initialState = {
    accessToken: null,
    followings: {},
    likes: {},
    playlists: [],
    user: null
};

export default function authed(state = initialState, action) {
    switch(action.type) {
    case types.RECEIVE_ACCESS_TOKEN:
        return Object.assign({}, state, {
            accessToken: action.accessToken
        });

用户完成身份验证流程后，我只需将访问令牌属性设置为authed 状态，并使用它来验证用户是否在整个应用程序中通过身份验证。即

if (authed.accessToken) {
  // display or do something different for logged in user
}

认证成功后，我还设置了一个cookie。当用户回来时，我从 cookie 中读取访问令牌并测试它是否仍然有效（对于 Facebook，它可能将它与 /me 端点一起使用）。

如果用户注销，我只需将authed 状态设置回initialState 并取消设置cookie。

case types.RESET_AUTHED:
    return Object.assign({}, initialState);

简单，但对我有用。你可以在这里查看代码：

https://github.com/andrewngu/sound-redux/blob/master/scripts/reducers/authed.js https://github.com/andrewngu/sound-redux/blob/master/scripts/actions/authed.js

☝ 这个文件有点毛茸茸，不过看看initAuth、loginUser、logoutUser、receiveAccessToken、resetAuthed 函数即可。

演示： https://soundredux.io

【讨论】：

非常感谢@AndrewNguyen，我正在研究你的代码。
没问题，如果您有任何问题，请告诉我。非常乐意提供帮助。

【解决方案2】：

我没有使用 Facebook 的登录流程，但我认为这将是相同的想法。

因此，要登录并存储数据，只需为用户创建额外的 reducer，并使用以下字段：

{
   access_token: null,
   isLogin: false,
   isProcessingLogin: true,
   profile: {}
}

当然，你可以有更多的字段，你也可以把注册信息放在这里（例如，isUserRegistering，或details，等等）。

所有你必须做的——创建像 logIn 和 logOut 这样的方法，它们将完成这个流程。在其中，只需更改相应的字段即可更新您的 UI 以添加加载、错误处理等。

类似于以下代码：

    // action creator
    const logIn = (params) => {
      return dispatch => {
         dispatch({ type: 'PROCESSING_LOGIN' });
         makeAPICall(params)
            .then(
                res => dispatch({ type: 'SUCCESS_LOGIN', payload: res }),
                err => dispatch({ type: 'FAIL_LOGIN', payload: err })
            );
      };
    };

    // reducer
    ['PROCESSING_LOGIN'](state) => {
        return Object.assign({}, state, {
           isProcessingLogin: true
        });
    },
    [SUCCESS_LOGIN](state, action) => {
        return Object.assign({}, state, {
            isLogin: true,
            isProcessingLogin: false,
            access_token: action.payload.meta.access_token
        });
    }

我不得不提一下，如果你的请求必须在 reducer 中区分它们是否带有令牌，那么构建中间件以始终附加令牌可能不是一个好主意——因此，添加它可能会更灵活一些自己代币。

【讨论】：

【解决方案3】：

我通常在 session reducer 中处理身份验证，然后定义一个 authorized 中间件函数来检查是否满足某些条件，如果不满足，则重定向。到目前为止，它工作得很好。

编辑，用简单的例子：

export default function authorized(store) {
  return (next) => {
    return (action) => {
      const { session: { loggedIn }} = store.getState()

      if (!loggedIn) {
        const session = cookie.load(sessionCookie.name)

       if (session) {
         next(restoreSession(session, activeBrand))

        // Not logged in, redirect.
       } else {
         next(replaceState({}, '/login'))
       }
     } 

     return next(action)
    }
  }
}

【讨论】：

非常好的建议，相同的示例代码？请