React中页面的拦截

页面拦截是web项目中常用的基础技术，本文简单地分析页面拦截的前因后果。

为什么拦截页面？

打个比方：项目中的页面相当于一个party,而查看页面的人类似于参加party的人：

• 只有特定的人才能参加party
• party也许有等级限制，只有高层人士才能坐第一排（maybe）
• 参加party，只能去预定好的位置或包厢或餐桌

除此之外，如果客人走错路，需要有专人将引到正确的地方，或者比较明显的位置。

这就是拦截的大致内容：身份审查与引导

拦截的业务示例

假设有这样的业务需要：

• 没登录的可以登录（登录页），可以查看关于我们、常见问题（两个页面）
• 登录过的用户可以查看所有页面（登录页、其他所有页）

---

分析与实现

//App.js
class App extends Component{
    render(){
    	<HashRouter>   
		   <Switch>
		     //默认直接到登录页
		     <Route path="/" exact component={ LoginLayout } />
		     //如果login页直接跳转
		     <Route path="/login" component={ LoginLayout } />
		     //其他的需要拦截
		     <Route path="/" component={Interceptor}/>              
		   </Switch>
	    </HashRouter>
    }
}

//interceptor.js
class App extends Component{
    render(){
        if(loginIsAvailable()){
            return (
                <div className="father-height">
                    <Switch>
                        <Route path="/main" component={ MainLayout } />                    
                        <Redirect exact from="/" to="/main" /> 
                        //游客页1
                        <Route path="/visitor-page1" component={ VisitorPage1} />                    
                        //游客页2
                        <Route path="/visitor-page2" component={ VisitorPage2} />           
                        <Route component={ Page404 } />
                    </Switch>
                </div>               
            )
        }else{
        	//登录失效
            return <Switch>
                        <Route path="/visitor-page1" component={ VisitorPage1} />                    
                        <Route path="/visitor-page2" component={ VisitorPage2} />         
                        //others 跳转到登录页
                        <Redirect to="/login"/> 
                    </Switch>
            
        }
        
    }
}

总结

• 不需要拦截的页面：空白页（/）、登录页面（渲染组件皆为LoginLayout）
• 拦截页面审核用户凭证（token）,根据凭证有效与否 渲染不同的内容