javascript – 如何通过React Native中的组件共享登录状态？

2019年7月27日 174次阅读

在vue.js中,我使用$vm.$root.user来存储用户数据并共享用户登录状态.在React.js中,可以方便地共享数据.

但我没有在React Native中找到任何关于它的文档,在React Native中这样做的正确方法是什么？

最佳答案 为了这个目的,我使用Reflux(
https://github.com/reflux/refluxjs)在React&反应原生.

它的工作方式是你设置一个具有登录状态,用户数据等的商店.每当某些内容发生变化时(通过ajax调用,用户操作等),你都可以从商店中激活一个事件.对象作为参数. (方法名称为’trigger’).

import Reflux from 'reflux'
import LoginActions from '../actions/LoginActions'

var LoginStore = Reflux.createStore({

isLoggedIn: false,
profile: {},

init: function() {
  // Do some initialization, e.g. checking if you've set some login information or tokens in local storage
},

listenables: [LoginActions],

loginUser: function(e) {
    // Do some call to a server to try and authenticate
    // fetch(...)
    if (fetch_result = true) {
        this.isLoggedIn = true;
        this.trigger({type: "LOGIN_STATUS", loggedIn: true});
    }
},

logoutUser: function(e) {
 // ...
}

上面引用的LoginActions是一个非常简单的模块,例如：

import Reflux from 'reflux'
export default LoginActions = Reflux.createActions([
  'loginUser',
  'logoutUser',
 ]);

您的主应用程序应该通过添加侦听器来侦听存储事件,并且基于对象(您自己定义),您可以更新状态或执行某些逻辑;例如

componentDidMount() {
    this.login = LoginStore.listen(this.loginStoreListener.bind(this));
 }

componenWillUnmount() {
    // Remove the listener on unmounting
    this.login();
}

loginStoreListener(obj) {
    switch (obj.type) {
      case "LOGIN_STATUS":
        this.setState({loggedIn: obj.loggedIn})
        break;
      case "PROFILE":
        this.setState({profile: obj.profile})
        break;
    }
}

在主应用程序中,根据loggedIn状态,您可以决定显示哪些视图,例如与Navigator结合使用.

点赞