React-Router 是React生態(tài)里面很重要的一環(huán)，現(xiàn)在React的單頁應用的路由基本都是前端自己管理的，而不像以前是后端路由，React管理路由的庫常用的就是就是 React-Router 。本文想寫一下 React-Router 的使用，但是光介紹API又太平淡了， 而且官方文檔已經(jīng)寫得很好了 ，我這里就用一個常見的開發(fā)場景來看看 React-Router 是怎么用的吧。而我們一般的系統(tǒng)都會有用戶訪問權(quán)限的限制，某些頁面可能需要用戶具有一定的權(quán)限才能訪問。本文就是用 React-Router 來實現(xiàn)一個前端鑒權(quán)模型。

本文全部代碼已經(jīng)上傳GitHub，大家可以拿下來玩玩：https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/React/react-router-usage

應用示例

本文要實現(xiàn)的功能是大家經(jīng)常遇到的場景，就是要控制不同的用戶角色來訪問不同的頁面，這里總共有四個頁面：

• /index: 網(wǎng)站首頁
• /login: 登錄頁
• /backend：后臺頁面
• /admin：管理頁面

另外還有三種角色：

• 未登錄用戶：只能訪問網(wǎng)站首頁/index和登錄頁/login
• 普通用戶：可以訪問網(wǎng)站首頁/index，登錄頁/login和后臺頁面/backend
• 管理員：可以訪問管理頁面/admin和其他所有頁面

引入React-Router

要實現(xiàn)路由鑒權(quán)，我們還得一步一步來，我們先用React-Router搭建一個簡單的帶有這幾個頁面的項目。我們直接用 create-react-app 創(chuàng)建一個新項目，然后建了一個 pages 文件夾，里面放入我們前面說的那幾個頁面：

我們頁面先寫簡單點，先寫個標題吧，比如這樣：

import React from 'react';

function Admin() {
 return (
 <h1>管理員頁面</h1>
 );
}

其他幾個頁面也是類似的。

然后我們就可以在 App.js 里面引入 React-Router 做路由跳轉(zhuǎn)了，注意我們在瀏覽器上使用的是 react-router-dom ，新版的 React-Router 將核心邏輯層和展示層分開了，核心邏輯會處理路由匹配等，展示層會處理實際的跳轉(zhuǎn)和路由變化的監(jiān)聽，之所以這么分，是因為React-Router不僅僅需要支持瀏覽器，還需要支持React Native，這兩個平臺的監(jiān)聽和跳轉(zhuǎn)是不一樣的，所以現(xiàn)在 React-Router 下面有好幾個包了：

• react-router ：核心邏輯處理，提供一些公用的基類
• react-router-dom ：具體實現(xiàn)瀏覽器相關(guān)的路由監(jiān)聽和跳轉(zhuǎn)
• react-router-native ：具體實現(xiàn)RN相關(guān)的路由監(jiān)聽和跳轉(zhuǎn)

在實際使用時，我們一般不需要引用 react-router ，而是直接用 react-router-dom 就行，因為它自己會去引用 react-router 。下面我們在項目里面引入 react-router-dom 。

import React from 'react';
import {
 BrowserRouter as Router,
 Switch,
 Route,
} from "react-router-dom";
import Home from './pages/Home';
import Login from './pages/Login';
import Backend from './pages/Backend';
import Admin from './pages/Admin';

function App() {
 return (
 <Router>
  <Switch>
  <Route path="/login" component={Login}/>
  <Route path="/backend" component={Backend}/>
  <Route path="/admin" component={Admin}/>
  <Route path="/" component={Home}/>
  </Switch>
 </Router>
 );
}

export default App;

然后可以在 Home 頁面用 Link 加上跳轉(zhuǎn)到其他頁面的鏈接，這樣就可以跳轉(zhuǎn)了：

import React from 'react';
import { Link } from 'react-router-dom';

function Home() {
 return (
 <>
  <h1>首頁</h1>
  <ul>
  <li><Link to="/login">登錄</Link></li>
  <li><Link to="/backend">后臺</Link></li>
  <li><Link to="/admin">管理員</Link></li>
  </ul>
 </>
 );
}

export default Home;

到現(xiàn)在我們的應用運行起來是這樣的：

模塊劃分

雖然我們的跳轉(zhuǎn)實現(xiàn)了，但是所有人都可以訪問任何頁面，我們前面的需求是要根據(jù)登錄的角色限制訪問的頁面的，在寫代碼前，我們先來思考下應該怎么做這個。當然最直觀最簡單的方法就是每個頁面都檢測下當前用戶的角色，匹配不上就報錯或者跳回首頁。我們現(xiàn)在只有幾個頁面，這樣做好像也還好，但是如果我們的應用變大了，頁面變多了，每個頁面都來一次檢測就顯得很重復了，所以我們應該換個角度來思考這個問題。

仔細一看，其實我們總共就三種角色，對應三種不同的權(quán)限，這三個權(quán)限還有層級關(guān)系，高級別的權(quán)限包含了低級別的權(quán)限，所以我們的頁面也可以按照這些權(quán)限分為三種：

• 公共頁面：所有人都可以訪問，沒登錄也可以訪問，包括網(wǎng)站首頁和登錄頁
• 普通頁面：普通登錄用戶可以訪問的頁面
• 管理員頁面：只有管理員才能訪問的頁面

為了好管理這三種頁面，我們可以將他們抽取成三個文件，放到一個獨立的文件夾 routes 里面，三個文件分別命名為 publicRoutes.js ， privateRoutes.js ， adminRoutes.js ：

對于每個路由文件，我們可以將這類路由組織成數(shù)組，然后 export 出去給外面調(diào)用，比如 publicRoutes.js ：

import Login from '../pages';
import Home from '../pages/Home';

const publicRoutes = [
 {
 path: '/login',
 component: Login,
 exact: true,
 },
 {
 path: '/',
 component: Home,
 exact: true,
 },
];

export default publicRoutes;

然后我們外面使用的地方直接改為：

import publicRoutes from './routes/publicRoutes';

function App() {
 return (
 <Router>
  <Switch>
  {publicRoutes.map(
   ({path, component, ...routes}) => 
   <Route key={path} path={path} component={component} {...routes}/>
  )}
  <Route path="/backend" component={Backend}/>
  <Route path="/admin" component={Admin}/>
  </Switch>
 </Router>
 );
}

這樣我們的 App.js 里面就不會有冗長的路由路由列表了，而是只需要循環(huán)一個數(shù)組就行了。但是對于需要登錄才能訪問的頁面和管理員頁面我們不能直接渲染 Route 組件，我們最好再封裝一個高級組件，將鑒權(quán)的工作放到這個組件里面去，這樣我們普通的頁面在實現(xiàn)時就不需要關(guān)心怎么鑒權(quán)了。

封裝高級組件

要封裝這個鑒權(quán)組件思路也很簡單，前面我們將 publicRoutes 直接拿來循環(huán)渲染了 Route 組件，我們的鑒權(quán)組件只需要在這個基礎上再加一個邏輯就行了：在渲染真正的 Route 組件前先檢查一下當前用戶是否有對應的權(quán)限，如果有就直接渲染 Route 組件，如果沒有就返回某個頁面，可以是登錄頁或者后臺首頁，具體根據(jù)自己項目需求來。所以我們的路由配置文件 privateRoutes.js ， adminRoutes.js 里面的路由會比 publicRoutes.js 的多兩個參數(shù)：

// privateRoutes.js
import Backend from '../pages/Backend';

const privateRoutes = [
 {
 path: '/backend',
 component: Backend,
 exact: true,
 role: 'user',  // 當前路由需要的角色權(quán)限
 backUrl: '/login' // 不滿足權(quán)限跳轉(zhuǎn)的路由
 },
];

export default privateRoutes;

adminRoutes.js 是類似的寫法：

// adminRoutes.js
import Admin from '../pages/Admin';

const adminRoutes = [
 {
 path: '/admin',
 component: Admin,
 exact: true,
 role: 'admin',  // 需要的權(quán)限是admin
 backUrl: '/backend' // 不滿足權(quán)限跳回后臺頁面
 },
];

export default adminRoutes;

然后就可以寫我們的高級組件了，我們將它命名為 AuthRoute 吧，注意我們這里假設的用戶登錄時后端API會返回給我們當前用戶的角色，一個用戶可能有多個角色，比如普通用戶的角色是 ['user'] ，管理員的角色是 ['user', 'admin'] ，具體的權(quán)限驗證邏輯要看自己項目權(quán)限的設計，這里只是一個例子：

// AuthRoute.js
import React from 'react';
import { Route, Redirect } from 'react-router-dom';

function AuthRoute(props) {
 const {
 user: {
  role: userRole
 },
 role: routeRole,
 backUrl,
 ...otherProps
 } = props;

 // 如果用戶有權(quán)限，就渲染對應的路由
 if (userRole && userRole.indexOf(routeRole) > -1) {
 return <Route {...otherProps} />
 } else {
 // 如果沒有權(quán)限，返回配置的默認路由
 return <Redirect to={backUrl} />
 }
}

export default AuthRoute;

然后用我們的 AuthRoute 的渲染 adminRoutes 和 privateRoutes :

// ... 省略其他代碼 ...

{privateRoutes.map(
 (route) => <AuthRoute key={route.path} {...route}/>
)}
{adminRoutes.map(
 (route) => <AuthRoute key={route.path} {...route}/>
)}

登錄設置權(quán)限

在我們的 AuthRoute 里面用到了 user: { role } 這個變量，但是我們還沒設置它。真實項目中一般是登錄的時候后端API會返回當前用戶的角色，然后前端將這個權(quán)限信息保存在一些狀態(tài)管理工具里面，比如 Redux 。我們這里直接在 Login 頁面寫死兩個按鈕來模擬這個權(quán)限了，用戶的配置就用根組件的 state 來管理了， Login 頁面的兩個按鈕會改變對應的 state ：

import React from 'react';
import { Link } from 'react-router-dom';

function Login(props) {
 const {loginAsUser, loginAsAdmin, history} = props;

 const userLoginHandler = () => {
 loginAsUser();  // 調(diào)用父級方法設置用戶權(quán)限
 history.replace('/backend');  // 登錄后跳轉(zhuǎn)后臺頁面
 }

 const adminLoginHandler = () => {
 loginAsAdmin();  // 調(diào)用父級方法設置管理員權(quán)限
 history.replace('/admin');  // 登錄后跳轉(zhuǎn)管理員頁面
 }

 return (
 <>
  <h1>登錄頁</h1>
  <button onClick={userLoginHandler}>普通用戶登錄</button>
  <br/><br/>
  <button onClick={adminLoginHandler}>管理員登錄</button>
  <br/><br/>
  <Link to="/">回首頁</Link>
 </>
 );
}

export default Login;

到這里我們這個簡單的路由鑒權(quán)就完成了，具體跑起來效果如下：

本文全部代碼已經(jīng)上傳GitHub，大家可以拿下來玩玩： https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/React/react-router-usage

總結(jié)

• React-Router 可以用來管理前端的路由跳轉(zhuǎn)，是 React 生態(tài)里面很重要的一個庫。
• React-Router 為了同時支持瀏覽器和 React-Native ，他分拆成了三個包 react-router 核心包， react-router-dom 瀏覽器包， react-router-native 支持 React-Native 。使用時不需要引入 react-router ，只需要引入需要的平臺包就行。
• 對于需要不同權(quán)限的路由，我們可以將他們拎出來分好類，單獨建成一個文件，如果路由不多，放在一個文件導出多個數(shù)組也行。
• 對于需要鑒權(quán)的路由，我們可以用一個高級組件將權(quán)限校驗的邏輯封裝在里面，其他頁面只需要加好配置，完全不用關(guān)心鑒權(quán)的問題。

本文內(nèi)容偏簡單，作為熟悉 React-Router 的用法還不錯，但是我們不能只會用，還要知道他的原理。下篇文章我們就來看看 React-Router 的源碼里面蘊藏了什么奧秘，大家可以點個關(guān)注不迷路，哈哈~

參考資料

官方文檔：https://reactrouter.com/web/guides/quick-start

GitHub源碼地址：https://juejin.im/post/5e3ffc85518825494e2772fd

到此這篇關(guān)于使用React-Router實現(xiàn)前端路由鑒權(quán)的示例代碼的文章就介紹到這了,更多相關(guān)React-Router 前端路由鑒權(quán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論