如何設(shè)計(jì)路由權(quán)限？
(????)??嗨，我是你穩(wěn)定更新、持續(xù)輸出的勾勾。
新年快樂(lè)，我又來(lái)更新了~
今天的主題是路由權(quán)限。
對(duì)于 react 中的路由權(quán)限管理，react-router 并沒(méi)有給我們提供任何 API 操作，需要我們單獨(dú)封裝一個(gè)組件。
對(duì)于路由的權(quán)限管理，我們要考慮的點(diǎn)很多，需要判斷路由是否是根路由，是否是登錄頁(yè)，是否是需要登錄權(quán)限的頁(yè)面，是否是非法路由，然后根據(jù)不同的路徑返回不同的組件或使用組件重定向路由。
先看我們項(xiàng)目下有哪些路由配置。
在 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}]}]
通過(guò)上面的路由配置，我們看出，該項(xiàng)目下有四個(gè)路由分別是主頁(yè) home，登錄 login，404 頁(yè)，再加一個(gè) pages 頁(yè)。
對(duì)這四個(gè)路由我們分析如下：
404 和 login 是任何人都能看到的頁(yè)面，home 和 pages 需要有登錄狀態(tài)
不在這個(gè)配置內(nèi)的路由都是非法路由
那么通過(guò)這兩點(diǎn)分析，我們實(shí)現(xiàn)一下路由權(quán)限管理的邏輯。
在項(xiàng)目下我們創(chuàng)建一個(gè) 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 == "/"){ //首頁(yè)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{ //沒(méi)有登錄狀態(tài)if(targetRouter.auth){ //該頁(yè)面是否要權(quán)限return}else{console.log(targetRouter.routes)return ()}}}export default Authcomponent;
這樣我們就把整個(gè)路由的權(quán)限統(tǒng)一管理起來(lái)，每一次的路由的跳轉(zhuǎn)都要去做一次權(quán)限判斷。所以我們把這個(gè)權(quán)限組件寫(xiě)在 App.js 中。
import Authcomponent from "./Authcomponent.js";function App(props) {console.log(window)return (<Router><Switch><Authcomponent>Authcomponent>Switch>Router>);}export default App;
這樣就保證了每次我們?cè)陧?yè)面進(jìn)行路由跳轉(zhuǎn)的時(shí)候，就會(huì)去這個(gè) Authcomponent.js 中進(jìn)行路由權(quán)限判定，從而實(shí)現(xiàn)對(duì)這個(gè)頁(yè)面的保護(hù)。
推薦閱讀：
技術(shù)人年度總結(jié) | 2020，注定不平凡
2020 最后一篇技術(shù)文：可愛(ài)的烏咪 UmiJS
前端人因?yàn)?Vue3 的 Ref-sugar 提案打起來(lái)了！
點(diǎn)點(diǎn)“贊”和“在看”，保護(hù)頭發(fā)，減少bug。