Javascript React路由器身份验证在路由更改时以1的增量重新激发
我在路由上使用onEnter={requireAuth}设置了一个基本的react/react-router-v3身份验证过程 一切正常,用户得到身份验证,脚本检查用户是否有足够的路由权限,重定向正常 但是,如果我在应用程序中使用任何类型的路由来链接到不同的组件,那么requireAuth函数似乎会在每次路由时以1的增量重新启动 index.jsJavascript React路由器身份验证在路由更改时以1的增量重新激发,javascript,reactjs,react-router,Javascript,Reactjs,React Router,我在路由上使用onEnter={requireAuth}设置了一个基本的react/react-router-v3身份验证过程 一切正常,用户得到身份验证,脚本检查用户是否有足够的路由权限,重定向正常 但是,如果我在应用程序中使用任何类型的路由来链接到不同的组件,那么requireAuth函数似乎会在每次路由时以1的增量重新启动 index.js ReactDOM.render(( <Router history={browserHistory}> <Route p
ReactDOM.render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute
component={ AuthContainer }
socket={socket}
/>
<Route
path="/access-denied"
component={ AccessDeniedContainer }
onEnter={() => requireAuth({socket: socket, role: ['admin', 'editor', 'user']})}
socket={socket}
/>
<Route
path="/dashboard"
component={ DashboardContainer }
onEnter={() => requireAuth({socket: socket, role: ['admin', 'editor']})}
socket={socket}
/>
<Route
path="/digital-sign"
component={ DigitalSignContainer }
onEnter={() => requireAuth({socket: socket, role: ['admin', 'user']})}
socket={socket}
/>
</Route>
</Router>
), document.getElementById('root'));
// Checks function if user is logged in
export function requireAuth(authData) {
console.log('doing auth');
isLoggedIn(authData);
}
// Gets JWT token from local storage
export function getToken() {
return localStorage.getItem('jwt');
}
// Checks if a user is logged in && is permitted to see protected routes
export function isLoggedIn(authData) {
const validatedToken = getToken();
const requiredRole = authData.role;
console.log('checking....');
var loggedInSocket = authData.socket;
// Send token to server for validation
loggedInSocket.emit('authToken', validatedToken);
loggedInSocket.on('noToken', function() {
browserHistory.replace('/');
});
// If fake token
loggedInSocket.on('falseToken', function() {
browserHistory.replace('/');
});
// if user validated
loggedInSocket.on('validated', function(userToken) {
if( requiredRole.indexOf(userToken.role) > -1 ) {
console.log('User is:' + userToken.role);
console.log('Must have:' + requiredRole);
return validatedToken;
}
else {
console.log('User is:' + userToken.role);
console.log('Must have:' + requiredRole);
browserHistory.replace('/access-denied');
}
});
}
中的console.log
loggedInSocket.on('validated',函数(userToken){}
刷新浏览器时触发正常。如果我使用路由在应用程序中导航,它会触发两次。当我再次导航/路由时,它会触发三次。等等。我不知所措,不知道从哪里开始调试
如果您有任何建议,我们将不胜感激。请提前感谢。我的组件中的套接字侦听器没有在routeChange上删除。我通过在组件卸载时删除它们来修复它
componentWillUnmount() {
this.socket.removeListener('showrows');
this.socket.removeListener('requestGroupId');
this.socket.removeListener('getData');
}