Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/24.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript React路由器身份验证在路由更改时以1的增量重新激发_Javascript_Reactjs_React Router - Fatal编程技术网

Javascript React路由器身份验证在路由更改时以1的增量重新激发

Javascript 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

我在路由上使用onEnter={requireAuth}设置了一个基本的react/react-router-v3身份验证过程

一切正常,用户得到身份验证,脚本检查用户是否有足够的路由权限,重定向正常

但是,如果我在应用程序中使用任何类型的路由来链接到不同的组件,那么requireAuth函数似乎会在每次路由时以1的增量重新启动

index.js

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');
}