如何設(shè)計路由權(quán)限？
(????)??嗨，我是你穩(wěn)定更新、持續(xù)輸出的勾勾。
新年快樂，我又來更新了~
今天的主題是路由權(quán)限。
對于 react 中的路由權(quán)限管理，react-router 并沒有給我們提供任何 API 操作，需要我們單獨封裝一個組件。
對于路由的權(quán)限管理，我們要考慮的點很多，需要判斷路由是否是根路由，是否是登錄頁，是否是需要登錄權(quán)限的頁面，是否是非法路由，然后根據(jù)不同的路徑返回不同的組件或使用組件重定向路由。
先看我們項目下有哪些路由配置。
在 routes.js 中：
//統(tǒng)一管理路由import Home from "../Home/Home"import Login from "../Login/Login"import Pages from "../Pages/Pages";import News from "../News/News";import Users from "../Users/Users";import NotFound from "../404/404";export default [{path:"/",component:Home,exact:true},{path:"/login",component:Login,exact:true},{path:"/404",component:NotFound,exact:true},{path:"/pages",component:Pages,routes:[{path:"/pages/news",component:News},{path:"/pages/users",component:Users}]}]
通過上面的路由配置，我們看出，該項目下有四個路由分別是主頁 home，登錄 login，404 頁，再加一個 pages 頁。
對這四個路由我們分析如下：
404 和 login 是任何人都能看到的頁面，home 和 pages 需要有登錄狀態(tài)
不在這個配置內(nèi)的路由都是非法路由
那么通過這兩點分析，我們實現(xiàn)一下路由權(quán)限管理的邏輯。
在項目下我們創(chuàng)建一個 Authcomponent.js 文件。
import React from "react"import { BrowserRouter as Router,Route,Redirect, Switch } from "react-router-dom"import routes from "../routes/routes"import Login from "../Login/Login"function Authcomponent(props){// console.log(props)const pathname = props.location.pathname; //獲取pathnameconst targetRouter = routes.find((item,index)=>{return pathname.search(item.path) !== -1 //查找在routes.js下是否存在})const isLogin = JSON.parse(window.localStorage.getItem("loginStatus"))if(pathname == "/"){ //首頁return <Redirect to="/login" component={Login}>Redirect>}if(!targetRouter){ //非法路由return <Redirect to = "/404">Redirect>}if(isLogin){ //有登錄狀態(tài)了if(pathname === "/login"){return <Redirect to="/home">Redirect>}else{return ()}}else{ //沒有登錄狀態(tài)if(targetRouter.auth){ //該頁面是否要權(quán)限return}else{console.log(targetRouter.routes)return ()}}}export default Authcomponent;
這樣我們就把整個路由的權(quán)限統(tǒng)一管理起來，每一次的路由的跳轉(zhuǎn)都要去做一次權(quán)限判斷。所以我們把這個權(quán)限組件寫在 App.js 中。
import Authcomponent from "./Authcomponent.js";function App(props) {console.log(window)return (<Router><Switch><Authcomponent>Authcomponent>Switch>Router>);}export default App;
這樣就保證了每次我們在頁面進行路由跳轉(zhuǎn)的時候，就會去這個 Authcomponent.js 中進行路由權(quán)限判定，從而實現(xiàn)對這個頁面的保護。
推薦閱讀：
技術(shù)人年度總結(jié) | 2020，注定不平凡
前端人因為 Vue3 的 Ref-sugar 提案打起來了！
點點“贊”和“在看”，保護頭發(fā)，減少bug。