如何设计路由权限？-技术圈

(｡･∀･)ﾉﾞ嗨，我是你稳定更新、持续输出的勾勾。

新年快乐，我又来更新了~

今天的主题是路由权限。

对于 react 中的路由权限管理，react-router 并没有给我们提供任何 API 操作，需要我们单独封装一个组件。

对于路由的权限管理，我们要考虑的点很多，需要判断路由是否是根路由，是否是登录页，是否是需要登录权限的页面，是否是非法路由，然后根据不同的路径返回不同的组件或使用组件重定向路由。

先看我们项目下有哪些路由配置。

在 routes.js 中：

//统一管理路由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 需要有登录状态

不在这个配置内的路由都是非法路由

那么通过这两点分析，我们实现一下路由权限管理的逻辑。

在项目下我们创建一个 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){ //有登录状态了if(pathname === "/login"){return <Redirect to="/home">Redirect>        }else{return (                            )        }    }else{ //没有登录状态        if(targetRouter.auth){ //该页面是否要权限            return         }else{            console.log(targetRouter.routes)            return (                                                 
            )        }    }}
export default Authcomponent;

这样我们就把整个路由的权限统一管理起来，每一次的路由的跳转都要去做一次权限判断。所以我们把这个权限组件写在 App.js 中。

import Authcomponent from "./Authcomponent.js";function App(props) {console.log(window)return (<Router><Switch><Authcomponent>Authcomponent>Switch>Router>  );}
export default App;

这样就保证了每次我们在页面进行路由跳转的时候，就会去这个 Authcomponent.js 中进行路由权限判定，从而实现对这个页面的保护。

推荐阅读：

技术人年度总结 | 2020，注定不平凡

2020 最后一篇技术文：可爱的乌咪 UmiJS

探索加密解密的世界

是我 Web 端配不上阿里了。

给 React 穿上美丽的‘嫁衣’

不可避免的问题：React 的路由如何抽离？

API 终结者 —— 杀手 Reflect

前端人因为 Vue3 的 Ref-sugar 提案打起来了！

点点“赞”和“在看”，保护头发，减少bug。