一个简单的react路由拦截
Posted GGbondMan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一个简单的react路由拦截相关的知识,希望对你有一定的参考价值。
不同于vue,通过在路由里设置meta元字符实现路由拦截。react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件(比如sessionID是否存在)来实现不同的组件的跳转,从而实习拦截。
接下来,我们实现一个简单的实例了解路由拦截的基本流程。
页面初次渲染的时候,需要我们进行登录。在这个首屏的页面里,我们放入一个链接。当点击链接,我们想进入我们的布局页面,(实际项目中是我们的后台)。但是布局页面是不允许我们随意进入的。如果没有登录(真实项目中我们以sessionid作为是否登录过的条件),那么页面会强制进入登录页面。否则进入我们的布局页面(实际项目中的后台)
我们这里写几个基本的组件,作为上述条件对应的组件:
login.js -------->登录页面
Layout.js -------->布局页面(实际项目中的后台)
author --------->授权组件 (作为拦截组件,拦截的条件写在这个组件中)
isLogin ---------->判断是否登录过的条件 (实际项目中的sessionID)
这个实例我们需要一个判断条件。也就是isLogin,我们结合状态管理工具,(本实例中的状态管理工具选用mobx),isLogin==true,表示我们我们可以访问该组件。否则表示我们无权访问该组件。
--------------------------------------------------------------------------------------------
1 index.js文件(入口文件) 2 3 import registerServiceWorker from ‘./registerServiceWorker‘; 4 import {Provider} from "mobx-react"; 5 import {observable} from "mobx"; 6 import {BrowserRouter,Switch,Route} from "react-router-dom"; 7 import Login from "./components/login/Login.js" 8 import AuthorizedRoute from "./components/author/author.js" 9 import Layout from "./components/Layout.js" 10 11 class Store{ 12 @observable isLogin=false; 13 } 14 const store=new Store() 15 16 ReactDOM.render( 17 <Provider store={store}> 18 <BrowserRouter> 19 <div> 20 <Switch> 21 <Route path="/" exact component={Login} /> 22 <Route path="/login" component={Login} /> 23 <AuthorizedRoute path="/author" component={Layout} /> 24 </Switch> 25 </div> 26 </BrowserRouter> 27 </Provider> 28 , document.getElementById(‘root‘)); 29 30 registerServiceWorker();
-----------------------------------------------------------------------------------------
1 author.js(主要内容是导出一个授权的组件。该组件内处理拦截逻辑) 2 3 import React, { Component } from ‘react‘; 4 5 import {Redirect,Route}from "react-router-dom"; 6 import Login from "../login/Login.js" 7 import {observer,inject} from "mobx-react"; 8 @inject("store") 9 @observer class AuthorizedRoute extends Component{ 10 render(){ 11 console.log("author里的store:",this.props.store) 12 let { component: Component,...rest} =this.props; //获取顶层provider上所有的信息 13 let {isLogin}=this.props.store; 14 console.log("isLogin:",isLogin) 15 console.log("this.props:",this.props) 16 return( 17 <Route {...rest} render={props=>{ 18 return isLogin?<Component {...this.props} />:<Redirect to="/Login" /> //这里的<Component {...this.props} />实际上指向的是Layout组件 19 }}/> 20 ) 21 } 22 } 23 export default AuthorizedRoute
-----------------------------------------------------------------------------------
1 login.js(登录组件) 2 3 import React, { Component } from ‘react‘; 4 5 import{Link} from "react-router-dom" 6 class Login extends Component{ 7 render(){ 8 return( 9 <div> 10 <p>请输入账户:<input type="text" /></p> 11 <p>请输入密码:<input type="password" /></p> 12 <hr /> 13 <Link to=‘/author‘>进入main组件</Link> 14 </div> 15 ) 16 } 17 } 18 export default Login
------------------------------------------------------------------------------------
1 Layout.js (布局组件) 2 3 import React, { Component } from ‘react‘; 4 5 class Layout extends Component{ 6 render(){ 7 return( 8 <div> 9 <div> 10 <ul> 11 <li>1111</li> 12 <li>2222</li> 13 <li>33333</li> 14 </ul> 15 </div> 16 <div> 17 <p>wenben1</p> 18 <p>wenben1</p> 19 <p>wenben1</p> 20 <p>wenben1</p> 21 </div> 22 </div> 23 ) 24 } 25 } 26 27 export default Layout 28 这里我们对layout组件进行了拦截,如果还有其他的页面也需要进行拦截,我们也可以在index.js中多添加一个授权组件。把它的component指向该组件,比如我们还有一个home页面也需要判断。那么我们可以做如下修改: 29 30 <Provider store={store}> 31 <BrowserRouter> 32 <div> 33 <Switch> 34 <Route path="/" exact component={Login} /> 35 <Route path="/login" component={Login} /> 36 <AuthorizedRoute path="/author" component={Layout} /> 37 <AuthorizedRoute path="/home" component={Home} /> 38 </Switch> 39 </div> 40 </BrowserRouter> 41 </Provider>
这个实例中我们用的是mobx作为状态管理工具,在全局定义了一个isLogin,我们也可以利用redux实现同样的功能,真实项目中一般我们会在登录以后通过访问后台返回的sessionID来进行判断。登录成功以后我们把sessionID存入sessionStorage中,在授权组件(本例中的AuthorizedRoute)先在本地取出sessionID,再通过它进行判断。
参考实例:https://www.jb51.net/article/139322.htm
————————————————
版权声明:本文为CSDN博主「sleeppingforg」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/baidu_41601048/article/details/80954158
以上是关于一个简单的react路由拦截的主要内容,如果未能解决你的问题,请参考以下文章
React 路由器 + Axios 拦截器。如何进行重定向?
使用具有不同片段字段的相同中继根查询的多个 react-router-relay 路由