Cấp phép cho bộ phận phản ứng của bộ định tuyến

Question

Các phương pháp hay nhất để kiểm tra ủy quyền trước khi lắp đặt thành phần là gì?

tôi sử dụng phản ứng-router 1.x

Dưới đây là tuyến đường của tôi

React.render((
    <Router history={History.createHistory()}> 
    <Route path="/" component={Dashboard}></Route> 
    <Route path="/login" component={LoginForm}></Route> 
    </Router> 
), document.body); 

Đây là thành phần Bảng điều khiển của tôi:

var Dashboard = React.createClass({ 
    componentWillMount: function() { 
    // I want to check authorization here 
    // If the user is not authorized they should be redirected to the login page. 
    // What is the right way to perform this check? 
    }, 

    render: function() { 
    return (
     <h1>Welcome</h1> 
    ); 
    } 
}); 

Answer 1

giải pháp cập nhật cho Phản ứng Router v4

<Route 
    path="/some-path" 
    render={() => !isAuthenticated ? 
    <Login/> : 
    <Redirect to="/some-path" /> 
}/> 

Phản ứng router lên để v3

Sử dụng 'OnEnter' sự kiện và trong tầm kiểm soát gọi lại nếu người dùng được phép:

<Route path="/" component={App} onEnter={someAuthCheck}> 

const someAuthCheck = (nextState, transition) => { ... } 

Answer 2

Với phản ứng-router 4 bạn có quyền truy cập vào các Route props bên trong thành phần. Để chuyển hướng người dùng, bạn chỉ cần đẩy URL mới vào lịch sử. Trong ví dụ của bạn, mã sẽ là:

var Dashboard = React.createClass({ 
    componentWillMount: function() { 
    const history = this.props.history; // you'll have this available 
    // You have your user information, probably from the state 
    // We let the user in only if the role is 'admin' 
    if (user.role !== 'admin') { 
     history.push('/'); // redirects the user to '/' 
    } 
    }, 

    render: function() { 
    return (
     <h1>Welcome</h1> 
    ); 
    } 
}); 

Tại các tài liệu, chúng cho thấy another way to do it, bằng cách sử dụng các render bất động sản, thay vì component. Chúng xác định PrivateRoute, làm cho mã rất rõ ràng khi bạn xác định tất cả tuyến đường của mình.

Answer 3

Nếu bạn muốn áp dụng ủy quyền trên nhiều thành phần thì bạn có thể làm như thế này.

<Route onEnter={requireAuth} component={Header}> 
    <Route path='dashboard' component={Dashboard} /> 
    <Route path='events' component={Events} /> 
</Route> 

Đối với thành phần duy nhất bạn có thể làm

<Route onEnter={requireAuth} component={Header}/> 

function requireAuth(nextState, replaceState) { 
    if (token || or your any condition to pass login test) 
    replaceState({ nextPathname: nextState.location.pathname }, 
    '/login') 
}