一個簡單的react路由攔截

不同於vue，通過在路由里設置meta元字符實現路由攔截。react實現路由攔截的基本思路還是利用Route 的render函數。通過判斷攔截條件（比如sessionID是否存在）來實現不同的組件的跳轉，從而實習攔截。

接下來，我們實現一個簡單的實例了解路由攔截的基本流程。

頁面初次渲染的時候，需要我們進行登錄。在這個首屏的頁面里，我們放入一個鏈接。當點擊鏈接，我們想進入我們的布局頁面，（實際項目中是我們的后台）。但是布局頁面是不允許我們隨意進入的。如果沒有登錄（真實項目中我們以sessionid作為是否登錄過的條件)，那么頁面會強制進入登錄頁面。否則進入我們的布局頁面（實際項目中的后台）

我們這里寫幾個基本的組件，作為上述條件對應的組件：

login.js   -------->登錄頁面

Layout.js -------->布局頁面（實際項目中的后台）

author   --------->授權組件 （作為攔截組件，攔截的條件寫在這個組件中）

isLogin  ---------->判斷是否登錄過的條件  （實際項目中的sessionID）

這個實例我們需要一個判斷條件。也就是isLogin，我們結合狀態管理工具，（本實例中的狀態管理工具選用mobx），isLogin==true，表示我們我們可以訪問該組件。否則表示我們無權訪問該組件。

 

--------------------------------------------------------------------------------------------

index.js文件（入口文件）

import registerServiceWorker from './registerServiceWorker';
import {Provider} from "mobx-react";
import {observable} from "mobx";
import {BrowserRouter,Switch,Route} from "react-router-dom";
import Login from "./components/login/Login.js"
import AuthorizedRoute from "./components/author/author.js"
import Layout from "./components/Layout.js"

class Store{
 @observable isLogin=false;   
}
const store=new Store()

ReactDOM.render(
    <Provider store={store}>
         <BrowserRouter>
         <div>
             <Switch>
             <Route path="/" exact component={Login} />
             <Route path="/login" component={Login} />
             <AuthorizedRoute path="/author" component={Layout} />
             </Switch>
         </div>
         </BrowserRouter>
    </Provider>
    , document.getElementById('root'));

registerServiceWorker();

 

-----------------------------------------------------------------------------------------

author.js（主要內容是導出一個授權的組件。該組件內處理攔截邏輯）

import React, { Component } from 'react';

import {Redirect,Route}from "react-router-dom";
import Login from "../login/Login.js"
import {observer,inject} from "mobx-react";
@inject("store") 
@observer class AuthorizedRoute extends Component{
  render(){
       console.log("author里的store:",this.props.store)
       let { component: Component,...rest} =this.props; //獲取頂層provider上所有的信息
       let {isLogin}=this.props.store;
      console.log("isLogin:",isLogin)
    console.log("this.props:",this.props)
    return(
            <Route {...rest} render={props=>{
               return isLogin?<Component {...this.props} />:<Redirect to="/Login" /> //這里的<Component {...this.props} />實際上指向的是Layout組件
            }}/>
        )
  }
}
export default AuthorizedRoute

 

-----------------------------------------------------------------------------------

login.js（登錄組件）

import React, { Component } from 'react';

import{Link} from "react-router-dom"
class Login extends Component{
  render(){
    return(
               <div>
                         <p>請輸入賬戶:<input type="text" /></p>
                         <p>請輸入密碼:<input type="password" /></p>
                         <hr />
                         <Link to='/author'>進入main組件</Link>
               </div>
        )
  }
}
export default Login

 

------------------------------------------------------------------------------------

Layout.js （布局組件）

import React, { Component } from 'react';

class Layout extends Component{
  render(){
    return(
               <div>
                    <div>
                        <ul>
                            <li>1111</li>
                            <li>2222</li>
                            <li>33333</li>
                        </ul>
                    </div>
                    <div>
                         <p>wenben1</p>
                         <p>wenben1</p>
                         <p>wenben1</p>
                         <p>wenben1</p>
                    </div>
               </div>
        )
  }
}

export default Layout
這里我們對layout組件進行了攔截，如果還有其他的頁面也需要進行攔截，我們也可以在index.js中多添加一個授權組件。把它的component指向該組件，比如我們還有一個home頁面也需要判斷。那么我們可以做如下修改：

   <Provider store={store}>
         <BrowserRouter>
         <div>
             <Switch>
             <Route path="/" exact component={Login} />
             <Route path="/login" component={Login} />
             <AuthorizedRoute path="/author" component={Layout} />
             <AuthorizedRoute path="/home" component={Home} />
             </Switch>
         </div>
         </BrowserRouter>
    </Provider>

 

 

這個實例中我們用的是mobx作為狀態管理工具，在全局定義了一個isLogin，我們也可以利用redux實現同樣的功能，真實項目中一般我們會在登錄以后通過訪問后台返回的sessionID來進行判斷。登錄成功以后我們把sessionID存入sessionStorage中，在授權組件（本例中的AuthorizedRoute）先在本地取出sessionID，再通過它進行判斷。

參考實例：https://www.jb51.net/article/139322.htm
————————————————
版權聲明：本文為CSDN博主「sleeppingforg」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/baidu_41601048/article/details/80954158