경로 변경시 React-router 인증이 1 증가합니다.

내 경로에서 onEnter = {requireAuth}를 사용하여 기본 react/react-router-v3 인증 프로세스를 설정했습니다.경로 변경시 React-router 인증이 1 증가합니다.

모든 것이 작동하고 사용자가 인증을 받으면 스크립트는 사용자에게 경로에 대한 충분한 권한이 있는지 확인하고 잘 리디렉션합니다.

그러나 내 응용 프로그램 내에서 다른 구성 요소에 연결하는 모든 유형의 경로를 사용하는 경우 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'));

authService.js

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

loggedInSocket.on ('유효', 기능 (경우 UserToken 내의 CONSOLE.LOG) {}

브라우저를 새로 고침하면 정상적으로 작동합니다. 내 응용 프로그램 내에서 경로를 사용하여 탐색하면 두 번 실행됩니다. 다시 탐색/경로를 지정하면 3 번 실행됩니다. 내가 잃어 버렸고, 이것을 디버깅을 시작할 위치를 모른다.

의견을 보내 주시면 대단히 감사하겠습니다. 미리 감사드립니다.

출처

2017-05-20 Jeffersonvdh

내 구성 요소의 소켓 수신기가 routeChange에서 제거되지 않았습니다. 구성 요소가 마운트 해제 될 때 제거하여 수정했습니다.

componentWillUnmount() { 
    this.socket.removeListener('showrows'); 
    this.socket.removeListener('requestGroupId'); 
    this.socket.removeListener('getData'); 
}

출처

2017-05-26 13:24:24 Jeffersonvdh

경로 변경시 React-router 인증이 1 증가합니다.

답변

관련 문제