【问题标题】:ReactRouter and Flux(altjs)反应路由器和通量(altjs)
【发布时间】:2015-07-20 18:32:59
【问题描述】:

为什么在刷新时,我的用户不再经过身份验证或返回 false?我的用户存储中的数据似乎正在被重置或丢弃。例如这是我的行为:

class UserActions {

  manuallogin(data) {
    this.dispatch();
    UserWebAPIUtils.manuallogin(data)
      .then((response, textStatus) => {
        if (textStatus === 'success') {
          this.actions.loginsuccess(data.email);
        }
      }, () => {
      });
  }

  loginsuccess(email) {
    this.dispatch(email);
  }


  logout() {
    this.dispatch();
    UserWebAPIUtils.logout()
      .then((response, textStatus) => {
        if (textStatus === 'success') {
          this.actions.logoutsuccess();
        }
      }, () => {
      });
  }

  logoutsuccess() {
    this.dispatch();
  }
}

export default alt.createActions(UserActions);

我的店就是这个..

class UserStore {


  constructor() {
    this.user = Immutable.Map({});
    this.on('init', this.bootstrap);
    this.on('bootstrap', this.bootstrap);
    this.bindListeners({
      handleLoginAttempt: UserActions.MANUALLOGIN,
      handleLoginSuccess: UserActions.LOGINSUCCESS,
      handleLogoutAttempt: UserActions.LOGOUT,
      handleLogoutSuccess: UserActions.LOGOUTSUCCESS
    });
  }

  bootstrap() {
    if (!Immutable.Map.isMap(this.user)) {
      this.user = Immutable.fromJS(this.user);
    }
  }

  handleLoginAttempt() {
    this.user = this.user.set('isWaiting', true);
    this.emitChange();
  }

  handleLoginSuccess() {
    this.user = this.user.merge({ isWaiting: false, authenticated: true });
    this.emitChange();
  }

  handleLogoutAttempt() {
    this.user = this.user.set('isWaiting', true);
    this.emitChange();
  }

  handleLogoutSuccess() {
    this.user = this.user.merge({ isWaiting: false, authenticated: false });
    this.emitChange();
  }

}

// Export our newly created Store
export default alt.createStore(UserStore, 'UserStore');

我通过简单地执行 User.getState().user.get(authenticated) 来检查我的用户是否经过身份验证,登录后它会返回 true,但是如果我手动输入任何 url 或刷新页面,之后它会返回 false。我也在使用 react-router,我认为这就是它崩溃的地方。

<Route>
 <Route name ="dash" path="/dashboard" handler={App}>
    <Route name ="dashboard" path="/dashboard" handler={Dashboard}/>
    <Route name ="reports" path="/reports" handler={Report} />
    <Route name ="employees" path="/employees" handler={Employees}/>
      <Route name ="MyEmployees" path="/MEmployees" handler={MyEmployees}/>
      <Route name ="AllEmployees" path="/AEmployees" handler={AllEmployees}/>
      <Route name ="Profile" path="/profile" handler={Profile}/>
      <Route name ="reportstocomplete" path="/reportsc" handler={ReportsToComplete}/>
    <Route name ="addReport" path="/addReport" handler={AddReports}/>
    <Route name ="readme" path="/readme" handler={Readme}/>
    <Route name ="statistics" path="/statistics" handler={Stats}/>
    <Route name ="signup" path="/signup" handler={Signup} />
 <Route name ="login" path="/" handler={Login} />
 </Route>
</Route>

登录后,如果成功,它会重新呈现屏幕并允许用户前往仪表板,一旦我在那里,用户仍然“经过身份验证”,我可以通过点击网页上的按钮导航到任何路线或导航栏上的按钮(通过 react-router)。但是,如果我刷新、单击链接或手动输入 /dashboard 或 /posts ,它将显示用户的状态未在控制台中进行身份验证。我是否将用户信息存储在本地存储中?我正在使用 mongo 来保存用户数据,并且工作正常,但是当您无法弄清楚为什么会这样工作时,它会非常令人沮丧..

【问题讨论】:

  • 浏览器刷新将完全重置页面 JavaScript,所以是的,它会重置商店等。如果您希望通过刷新或手动输入 url 来保持内容,那么您需要保存并加载它们外部源(服务器)或内部持久性,如 cookie、LocalStorage 或 web sql。例如,如果您让商店保存更改并从 LocalStorage 加载它们,您将看到这项工作。
  • 好的,我只需要利用 mixins 和 LocalStorage 来保存 UI 数据。谢谢你。顺便说一句,你有什么好的参考资料吗?
  • 对不起,我看错了你的问题,没有意识到你正在使用 mongodb。但看起来您需要查看正在加载的内容以保持用户登录。也许您需要一个带有会话密钥或类似内容的 cookie?
  • 我确实有一个问题,当开发人员只是在自己的机器上进行测试时,cookie 是否会在本地主机上持续存在?

标签: javascript mongodb reactjs flux react-router


【解决方案1】:

我发现了问题所在。在服务器上,我使用 cookieparser 将会话保存到 cookie 中,并将安全选项设置为 true。因此,它不会在任何不是 https 的东西上创建 cookie。本地主机不在 https 上运行,这就是为什么它会继续忘记我商店中的用户。

app.use(cookieParser());
  // Create a session middleware with the given options
  // Note session data is not saved in the cookie itself, just the session ID. Session data is stored server-side.
  // Options: resave: forces the session to be saved back to the session store, even if the session was never
  //                  modified during the request. Depending on your store this may be necessary, but it can also
  //                  create race conditions where a client has two parallel requests to your server and changes made
  //                  to the session in one request may get overwritten when the other request ends, even if it made no
  //                  changes(this behavior also depends on what store you're using).
  //          saveUnitialized: Forces a session that is uninitialized to be saved to the store. A session is uninitialized when
  //                  it is new but not modified. Choosing false is useful for implementing login sessions, reducing server storage
  //                  usage, or complying with laws that require permission before setting a cookie. Choosing false will also help with
  //                  race conditions where a client makes multiple parallel requests without a session
  //          secret: This is the secret used to sign the session ID cookie.
  //          name: The name of the session ID cookie to set in the response (and read from in the request).
  //          cookie: Please note that secure: true is a recommended option.
  //                  However, it requires an https-enabled website, i.e., HTTPS is necessary for secure cookies.
  //                  If secure is set, and you access your site over HTTP, the cookie will not be set.
  app.use(session({
    resave: true,
    saveUninitialized: true,
    // Use generic cookie name for security purposes
    key: 'sessionId',
    secret: secrets.sessionSecret,
    // Add HTTPOnly, Secure attributes on Session Cookie
    cookie: {
      httpOnly: true,
      secure: true
    },
    store: new MongoStore({ url: secrets.db, autoReconnect: true})
  }));

  app.use(passport.initialize());
  app.use(passport.session());

  app.use(flash());

刚刚去掉了 cookie 的 httpOnly 和安全部分,因为它只在 https 上运行

【讨论】:

  • 我们有同样的会话问题,你能把你改变的代码粘贴到这里吗?
  • 我认为这通常是一个cookie问题,要么使用flux或cookie中的localStorage。但是本地存储更大。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-03-31
  • 2016-08-18
  • 2017-06-14
  • 2015-08-15
  • 1970-01-01
  • 2020-09-30
相关资源
最近更新 更多