使用使用React-Router实现前端路由鉴权的示例代码实现前端路由鉴权的示例代码
主要介绍了使用React-Router实现前端路由鉴权的示例代码,文中通过示例代码介绍的非常详细,对大家的学
习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
React-Router 是React生态里面很重要的一环,现在React的单页应用的路由基本都是前端自己管理的,而不像以前是后端路
由,React管理路由的库常用的就是就是 React-Router 。本文想写一下 React-Router 的使用,但是光介绍API又太平淡了, 而且
官方文档已经写得很好了 ,我这里就用一个常见的开发场景来看看 React-Router 是怎么用的吧。而我们一般的系统都会有用户
访问权限的限制,某些页面可能需要用户具有一定的权限才能访问。本文就是用 React-Router 来实现一个前端鉴权模型。
本文全部代码已经上传GitHub,大家可以拿下来玩玩:https://github.com/dennis-jiang/Front-End-
Knowledges/tree/master/Examples/React/react-router-usage
应用示例应用示例
本文要实现的功能是大家经常遇到的场景,就是要控制不同的用户角色来访问不同的页面,这里总共有四个页面:
/index: 网站首页
/login: 登录页
/backend:后台页面
/admin:管理页面
另外还有三种角色:
未登录用户:只能访问网站首页/index和登录页/login
普通用户:可以访问网站首页/index,登录页/login和后台页面/backend
管理员:可以访问管理页面/admin和其他所有页面
引入引入React-Router
要实现路由鉴权,我们还得一步一步来,我们先用React-Router搭建一个简单的带有这几个页面的项目。我们直接用 create-
react-app 创建一个新项目,然后建了一个 pages 文件夹,里面放入我们前面说的那几个页面:
我们页面先写简单点,先写个标题吧,比如这样:
import React from 'react';
function Admin() {
return (
<h1>管理员页面</h1>
);
}
其他几个页面也是类似的。
然后我们就可以在 App.js 里面引入 React-Router 做路由跳转了,注意我们在浏览器上使用的是 react-router-dom ,新版的 React-
Router 将核心逻辑层和展示层分开了,核心逻辑会处理路由匹配等,展示层会处理实际的跳转和路由变化的监听,之所以这么
分,是因为React-Router不仅仅需要支持浏览器,还需要支持React Native,这两个平台的监听和跳转是不一样的,所以现在
React-Router 下面有好几个包了:
react-router :核心逻辑处理,提供一些公用的基类
react-router-dom :具体实现浏览器相关的路由监听和跳转
react-router-native :具体实现RN相关的路由监听和跳转
在实际使用时,我们一般不需要引用 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';
评论0