Javascript 反应器和流量(altjs)
为什么刷新时,我的用户不再经过身份验证或返回false?我的用户存储中的数据似乎正在被重置或抛出。例如,这是我的行动:Javascript 反应器和流量(altjs),javascript,mongodb,reactjs,flux,react-router,Javascript,Mongodb,Reactjs,Flux,React Router,为什么刷新时,我的用户不再经过身份验证或返回false?我的用户存储中的数据似乎正在被重置或抛出。例如,这是我的行动: class UserActions { manuallogin(data) { this.dispatch(); UserWebAPIUtils.manuallogin(data) .then((response, textStatus) => { if (textStatus === 'success') {
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路由器,我想这就是它崩溃的地方
<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路由器)导航到任何路线。但是,如果我刷新、单击链接或手动键入/dashboard或/posts,则会显示用户的状态未在控制台中验证。我是否将用户信息存储在本地存储器或其他地方?我正在使用mongo来保存用户数据,这很好,但是当你不明白为什么某些东西会这样工作时,这就相当令人沮丧了。我发现了问题所在。在服务器上,我使用cookieparser将会话保存到一个cookie中,并将安全选项设置为true。因此,它不会在非https的任何内容上创建cookie。Localhost不在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和secure部分,因为它只在https上运行浏览器刷新将完全重置页面JavaScript,因此是的,它将重置存储等。如果您希望通过刷新或手动键入url来持久保存内容,则需要从外部源(服务器)保存并加载它们或者像cookie、LocalStorage或web sql这样的内部持久性。例如,如果您让您的存储保存更改并从LocalStorage加载它们,您将看到这项工作。好的,所以我只需要利用mixin和LocalStorage来保留UI数据。非常感谢。顺便说一句,你有什么好的参考资料吗?哦,对不起,我误读了你的问题,没有意识到你在使用mongodb。但看起来您需要查看正在加载的内容,以保持用户登录。也许您需要一个带有会话密钥或类似密钥的cookie?我有一个问题,当开发人员在自己的机器上测试时,cookie是否会在本地主机上持续存在?我们有相同的会话问题,您可以将更改的代码粘贴到这里吗?我认为这通常是cookie问题,可以使用flux的本地存储,也可以使用cookie。但是本地存储更大。