2015-07-20 121 views
1

为什么刷新时,我的用户不再被验证或返回false?这似乎是我的用户存储中的数据正在重置或抛出。例如,这是我的行动:ReactRouter和Flux(altjs)

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(认证) ,登录后它会恢复正常,但是如果我手动输入任何网址或刷新页面,则会在以后返回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> 

登录后,它重新渲染画面,如果succesfull,并允许用户前往仪表板,一旦我有用户仍然“认证”,我可以用我的按钮点击导航到任何路线在网页上或导航栏上的按钮(通过反应路由器)。但是,如果我刷新,点击链接,或手动输入/仪表板或/帖子,它会显示用户的状态未在控制台中进行身份验证。我是否将用户信息存储在本地存储中?我正在使用mongo来保存用户数据,并且工作正常,但是当你无法弄清楚为什么某些事情甚至可以像这样工作时,它非常令人沮丧......

+0

刷新浏览器将重设页面的JavaScript完全,所以是的,它会重设专卖店等,如果你想要的东西坚持刷新或手动输入url类型,则需要从外部源(服务器)或内部持久性(如Cookie,LocalStorage或Web SQL)保存和加载它们。例如,如果您让商店保存更改并从LocalStorage加载它们,您会看到这项工作。 –

+0

好吧,我只需要利用mixins和LocalStorage来保存UI数据。谢谢。你有什么好的参考做这个顺便说一句吗? – Karan

+0

哦,对不起,我误解了你的问题,没有意识到你正在使用mongodb。但它看起来像你需要看看你正在加载什么来坚持用户登录。也许你需要一个会话密钥或类似的cookie? –

回答

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()); 

刚刚摆脱了仅Http和饼干安全的一部分,因为它只能运行通过HTTPS

+0

我们有同样的会议问题,你可以在这里粘贴代码,你已经改变了吗? –

+0

我认为它通常是一个cookie问题,要么使用来自flux或cookie的localStorage。本地存储虽然更大。 – Karan