使用API​​對私人路線進行身份驗證

Question

我正在嘗試驗證私人路線。在允許訪問之前，我通過檢查cookie來工作。但是，cookie可能會被欺騙，所以我有一個接受cookie的API端點並返回它的有效與否。

工作版本，而API：

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
    cookies.get('sessionid') ? (
     <Component {...props}/> 
    ) : (
     <Redirect to={{ 
     pathname: '/', 
     state: { from: props.location } 
     }}/> 
    ) 
)}/> 
) 

ReactDOM.render((
    <Router> 
     <Switch> 
      <Route exact path="/" component={Login}/> 
      <PrivateRoute exact path="/home" component={Home} /> 
      <PrivateRoute exact path="/upload" component={Upload}/> 
      <PrivateRoute exact path="/logout" component={Logout}/> 
      <PrivateRoute exact path="/review" component={Review}/> 
      <Route component={ NotFound } /> 
     </Switch> 
    </Router> 
), document.getElementById('root')) 

附加代碼API調用：

axios.post(process.env.REACT_APP_API_URL+'/account/validate-session', { 
    t1_session_id: cookies.get('sessionid') 
    }) 
    .then(function (response) { 
    if(response.data.status === "OK"){ 
     console.log('authenticated go to private route'); 
    } else { 
     console.log('not valid, redirect to index'); 
    } 
    }.bind(this)) 
    .catch(function (error) { 
    console.log('not valid, redirect to index'); 
    }.bind(this)); 

的問題是我不知道如何將代碼API部分進入主路部分。

謝謝

Answer 1

每個用戶只能欺騙自己的cookie。同樣，用戶可以欺騙在瀏覽器中運行的整個JS代碼。因此，調用服務器驗證cookie不會很大程度上減輕您的漏洞。

相反，您應該在您的JS代碼中信任該Cookie，並在需要登錄的服務器的每個操作中檢查該Cookie。

請注意，Cookie不是識別用戶的最安全方式，因爲它是受到CSRF攻擊的主體。您應該使用JWT或檢查referer。無論如何，如果你決定堅持你的想法，詢問服務器cookie是否有效，我會採用arikanmstf的答案，除非你應該處理三種情況：auth = true，auth = false和auth = null，因爲如果我們還沒有從我們想要隱藏元素的服務器獲得答案，但是如果我們得到否定答案，我們希望重定向用戶。

constructor(props) { 
    super(props); 
    this.state = { 
     isAuth: null 
    }; 
    } 

render() { 
    if(this.state.isAuth === null) return null; 

    return (this.state.isAuth ? <YourComponent /> : <Redirect ... /> 
    } 

Answer 2

嗯，我想你必須爲它編寫一個包裝器組件。讓我們嘗試：

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
import axios from 'axios'; 

import YourComponent from './path/to/YourComponent'; 

class WrapperComponent extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     isAuth: false 
    }; 
    } 

    componentDidMount() { 
    axios.post(process.env.REACT_APP_API_URL+'/account/validate-session', { 
    t1_session_id: cookies.get('sessionid') 
    }) 
    .then(function (response) { 
     if(response.data.status === "OK"){ 
      this.setState({isAuth: true}) 
     } else { 
      this.setState({isAuth: false}) 
     } 
    }.bind(this)) 
    .catch(function (error) { 
     console.log('not valid, redirect to index'); 
    }.bind(this)); 
    } 

    render() { 
    return (this.state.isAuth ? <YourComponent /> : null); 
    } 
} 

export default WrapperComponent; 

現在你的路由必須重定向到WrapperComponent：

const PrivateRoute = ({ component: WrapperComponent, ...rest }) => (
    <Route {...rest} render={props => (
    <WrapperComponent {...props}/> 
)}/> 
)