当登录状态为组件状态时,如何使用react路由器实现依赖登录的路径
How to implement login-dependent paths with react-router, when the login-status is in the component-state?
我正试图从react router repo中实现身份验证流示例,但我的用例遇到了问题,作为ReactJS初学者,我不会解决这些问题。
我的登录状态是基于CSRF cookie的存在,所以我的应用程序中有一个方法,可以检索CSRF cookie并将其值保存在状态中:
@autobind
class App extends React.Component {
constructor() {
super();
this.state = {
csrfToken : '',
log : {}
}
}
setCSRFToken() {
this.state = { csrfToken : cookie.load('csrf') };
this.setState({ csrfToken : this.state.csrfToken });
}
loggedIn() {
return !!this.state.csrfToken
}
由于我只想在登录时查看我的组件,我尝试根据loggedIn()和onEnter={requireAuth}:更改路由中的路径
function requireAuth(nextState, replace) {
if (!App.loggedIn()) {
console.log('No csrfToken found, asking for login')
replace({
pathname: '/login',
state: {nextPathname: nextState.location.pathname }
})
}
}
render((
<Router history={hashHistory}>
<Route path="/" component={App} onEnter={requireAuth}>
<IndexRoute component={Home}/>
<Route path="/hello" component={Hello}/>
</Route>
</Router>
), document.querySelector('#main'))
不过,App.log()不起作用,因为它不是一个公共函数。根据这个答案,ReactJS中的公共函数无法访问React架构所期望的内部状态,因此使用static实现它没有帮助。
我可能会继续将登录状态保存在本地存储中,但我想知道在ReactJS中是否有不同的方法来解决这个问题。
我正在Store(如Flux建议的)和routes:中设置登录状态
const UserStore = require("./stores/UserStore.js");
let is_user_logged_in = !!UserStore.getToken();
UserStore.addChangeListener(() => {
is_user_logged_in = !!UserStore.getToken();
});
function requireAuth(nextState, replaceState) {
if (!is_user_logged_in) {
replaceState({nextPathname: 'login'}, '');
}
}
const routes = (
<Route path="/" component={Layout}>
<IndexRoute component={Home}/>
<Route path="login" component={Login}/>
<Route path="secret" component={Secret} onEnter={requireAuth}/>
<Route path="*" component={NotFound}/>
</Route>
);
module.exports = routes;
工作得很好,用这个构建了几个应用程序:)
UserStore.js:
"use strict";
const AppDispatcher = require('./../dispatchers/AppDispatcher.js');
const EventEmitter = require('eventemitter3');
const assign = require('object-assign');
const store = require('store');
const Api = require('./../helpers/Api.js');
const UserActions = require('./../actions/UserActions.js');
import { browserHistory } from 'react-router';
const UserStore = assign({}, EventEmitter.prototype, {
token: null,
error: null,
setError: function ({error}) {
this.error = error;
},
getError: function () {
return this.error;
},
setToken: function ({token}) {
this.token = token;
if (token !== null) {
store.set('token', token);
} else {
store.remove('token');
}
},
getToken: function () {
return this.token;
},
emitChange: function () {
this.emit('USER_CHANGE');
},
addChangeListener: function (cb) {
this.on('USER_CHANGE', cb);
},
removeChangeListener: function (cb) {
this.removeListener('USER_CHANGE', cb);
},
});
AppDispatcher.register(function (action) {
switch (action.actionType) {
case 'user_login':
Api.login({
username: action.data.username,
password: action.data.password,
cb: function ({error, response}) {
if (error !== null) {
console.log('#dfd4sf424');
console.log(error);
UserActions.logout();
} else {
if (response['success'] === false) {
UserStore.setError({error: response['error']});
UserStore.emitChange();
} else {
UserStore.setError({error: null});
UserStore.setToken({token: response['auth-token']});
UserStore.emitChange();
}
}
}
});
break;
case 'user_logout':
UserStore.setToken({token: null});
UserStore.setError({error: null});
UserStore.emitChange();
break;
case 'user_auto_login':
UserStore.setToken({token: action.data.token});
UserStore.setError({error: null});
UserStore.emitChange();
break;
}
});
module.exports = UserStore;
相关文章:
- 使用javascript反复检查用户在facebook上的登录状态
- 使用Soundcloud API中的令牌保持登录状态
- 如何通过React Native中的组件共享登录状态
- 当登录状态为组件状态时,如何使用react路由器实现依赖登录的路径
- 如果未处于登录状态,如何重定向到登录页面,登录后重定向到原始页面
- 流星如何保存登录状态
- Meteor.user() 在尝试检查用户登录状态时为空
- 维护登录状态 om chrome 打包应用程序
- 我可以阻止我的 HTML 页面加载,直到我的 Facebook 登录状态脚本运行之后
- 使用车把的登录状态相关菜单.js
- 登录状态指示灯功能不起作用
- 获取我的网站的用户的登录状态,并使用 php 查看具有该名称表单数据库的用户数
- 当我们在应用程序中向后移动时,有没有办法更新登录状态
- Facebook API:使用JavaScript SDK登录,然后使用PHP检查登录状态
- 根据AngularJS中的登录状态,使用不同模板的相同url('/')
- 没有APP访问的facebook登录状态
- 检查登录状态
- 如何用AJAX发送登录状态
- 流星-在发布模板之前检查登录状态
- 用passport.js、mysql和express-session持久化登录状态