【发布时间】: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