摘要：高階函數(shù)驗(yàn)證中間件驗(yàn)證驗(yàn)證之所以用三種方式一起是因?yàn)楦唠A函數(shù)在性能調(diào)優(yōu)的時(shí)候并不是特別容易?？偨Y(jié)高階函數(shù)適合用在子控件需要確定權(quán)限后渲染中間件適合無(wú)狀態(tài)頁(yè)面中的登錄狀態(tài)判斷驗(yàn)證，使用范圍就比較狹窄了。

最近一直在寫(xiě)一個(gè)React、Redux的前端項(xiàng)目，登錄狀態(tài)驗(yàn)證這一塊還是比較頭疼的。

我的實(shí)踐下有三種方式來(lái)驗(yàn)證用戶登錄狀態(tài)，目前我選擇用三種方式一起用在項(xiàng)目里面。

Redux高階函數(shù)驗(yàn)證（High-Order Function）

Actions中間件驗(yàn)證

Component WillMount 驗(yàn)證

之所以用三種方式一起是因?yàn)?strong>Redux高階函數(shù)在性能調(diào)優(yōu)的時(shí)候并不是特別容易。

//把需要登錄狀態(tài)驗(yàn)證的Component傳入到這個(gè)高階函數(shù)中
export function requireAuthentication(Component) {
    class AuthenticatedComponent extends Component {
        constructor(props) {
            super(props)
        }
        //只在首次Mount時(shí)來(lái)驗(yàn)證權(quán)限
        componentWillMount() {
            this.checkAuth();
        }
        checkAuth(){
            const {path,isSignIn,dispatch}=this.props;
            if(!isSignIn){
                //沒(méi)有登錄
                //記錄當(dāng)前頁(yè)面path
                //跳轉(zhuǎn)到SignIn Page處理登錄 登錄完成夠會(huì)跳回當(dāng)前頁(yè)面
                dispatch(CommonActions.setNextUrl(path))
                browserHistory.push("/sign");
            }
        }
        render() {
            console.log("auth render")
            return (
                

                
                    {this.props.isSignIn == true
                        ? 
                        : null
                    }
                
            )

        }
    }

    const mapStateToProps = (state) => ({
        path:state.routing.locationBeforeTransitions.pathname,
        isSignIn:state.common.isSignIn,
        state:state
    })
    return connect(mapStateToProps)(AuthenticatedComponent);
}

你可以把它像這樣用在router中：

{ path:"courseCate",component:requireAuthentication(CourseCate)}

目前存在的一些問(wèn)題：

高階函數(shù)中傳入的最頂層的Component不能再使用connect

過(guò)多的高階函數(shù)生命周期的邏輯難以維護(hù)、性能隱患

export function checkAuth(nextUrl,nextFn) {
    return (dispatch,getState)=>{
        //檢測(cè)用戶登錄情況
        if(!getState().common.isSignIn){
            //沒(méi)有登錄 記錄當(dāng)前path 
            //跳轉(zhuǎn)到sign page 登錄完成后 跳轉(zhuǎn)回來(lái)
            dispatch(setNextUrl(nextUrl));
            pushUrl("/sign");//封裝了 browserHistory.push(url)
        }else{
            //通過(guò)驗(yàn)證后 執(zhí)行下一個(gè)Fn
            dispatch(nextFn);
        }
    }
}

你可以像這樣用在你的Actions中

export function fetchFoo(url,conf) {

    return (dispatch,getState) => {
        if(shouldFetchFoo(getState())){
            dispatch(requestFetchFoo());
            return fetch(url,conf)
            .then(res=>res.json())
            .then(json=>{
                ...
            })
        }
    }
    
}
export function needFetchFoo(nextUrl,url,conf){
    retrun (dispatch)=>{
        dispatch(checkAuth(nextUrl,fetchFoo(url,conf)))
    }
}

目前存在的一些問(wèn)題：

雖然可以避免過(guò)多的高階函數(shù)函數(shù)導(dǎo)致頁(yè)面性能下降，但是無(wú)法很好滿足業(yè)務(wù)邏輯

驗(yàn)證如果未通過(guò)直接阻斷當(dāng)前操作

這基本上可以認(rèn)為是Actions中間驗(yàn)證的一種變種

export function checkAuthWithoutNextFn(nextUrl) {
    return (dispatch,getState)=>{
        //check if user sign in
        if(!getState().common.isSignIn){
            //if not set the nexturl 
            //and push url to sign page
            dispatch(setNextUrl(nextUrl));
            pushUrl("/sign");
        }
    }
}

你可以像這樣把他用在Component WillMount事件中

    componentWillMount(){
        const {dispatch} = this.props;
        dispatch(CommonActions.checkAuthWithoutNextFn("/coursecate"));
    }

目前存在的一些問(wèn)題：

權(quán)限未得到驗(yàn)證時(shí)，不會(huì)阻斷子控件渲染，觸發(fā)子控件生命周期中的事件

舉個(gè)例子:
比如父控件中componetWillDidMount中調(diào)用該方法判斷用戶登錄狀態(tài)
fatherComponet.js

    componentWillMount(){
        const {dispatch} = this.props;
        dispatch(CommonActions.checkAuthWithoutNextFn("/coursecate"));
    }

然而子控件componentWillMount中有一個(gè)fetch是需要權(quán)限驗(yàn)證（此時(shí)父控件中并沒(méi)有阻斷子控件渲染，在父控件正在驗(yàn)證權(quán)限的同時(shí)，子控件的fetch執(zhí)行了。高階函數(shù)可以阻斷子控件渲染）的。
雖然渲染順序是fatherComponet->childComponet
但是childComponet里的componentWillMount也是觸發(fā)了（也就是說(shuō)，在未驗(yàn)證登錄情況下就觸發(fā)了fetch），可能會(huì)造成一些不必要的請(qǐng)求。
我目前的處理方式：在子控件ComponentWillMount的fetch中加入一個(gè)shouldFetch()進(jìn)行請(qǐng)求前判斷。

1.高階函數(shù)適合用在：子控件需要確定權(quán)限后渲染
2.actions中間件適合：無(wú)狀態(tài)頁(yè)面中的登錄狀態(tài)判斷
3.component驗(yàn)證，使用范圍就比較狹窄了。

大家雨露均沾

以上是我個(gè)人目前的一些小見(jiàn)解，歡迎各位指正和補(bǔ)充哈。