使用react-router0-config時的簡易守衛
import React from ‘react’
import { renderRoutes } from ‘react-router-config’
import { withRouter, Link } from ‘react-router-dom’
import { Home, Login, Forms, List, Main } from ‘./components’
const Root = ({ route }) => (
class Router extends React.Component {
componentWillMount() {
const { location } = this.props
if(!sessionStorage.getItem(‘token’)&&location.pathname!’/login’){
this.props.history.push(’/login’)
}
}
componentWillReceiveProps(nextProps) {
if(!sessionStorage.getItem(‘token’)&&nextProps.location.pathname!’/login’){
this.props.history.push(’/login’)
}
}
routes = [
{
component: Root,
routes: [
{
path: “/login”,
component: Login,
},
{
path: “/home”,
component: Home,
routes: [
{
path: “/home/edits”,
component: Forms,
},
{
path: “/home/forms”,
component: Forms,
},
{
path: “/home/list”,
component: List,
},
]
},
{
path: “/”,
component: Main,
}
]
}
];
render() {
return (
<>
<span style={{ display: ‘inline-block’, margin: ‘0 5px’ }}>login
<span style={{ display: ‘inline-block’, margin: ‘0 5px’ }}>home
<span style={{ display: ‘inline-block’, margin: ‘0 5px’ }}>main
{renderRoutes(this.routes)}
</>
)
}
}
export default withRouter(Router)
相關文章
- Resove守衛
- 守衛者的挑戰
- Vue — 導航守衛Vue
- Angular路由——路由守衛Angular路由
- Laravel guard 菊花守衛者Laravel
- [NGX]Angular路由守衛初探(1)Angular路由
- Vue 導航守衛(路由的生命週期)Vue路由
- 動手理解導航守衛(Vue)Vue
- vue2.0 實現路由守衛Vue路由
- Vue | 路由守衛面試常考Vue路由面試
- 基於Ardalis.GuardClauses守衛元件的擴充元件
- “智慧糧倉”守衛中國飯碗
- Vue -- vue-全域性導航守衛Vue
- Mac簡易計時器Mac
- “360安全衛士團隊版 · 青少年守護計劃”重磅釋出,守衛教育網路淨土
- 《時序殘響24/36》序夜揭開時間的謊言,怪異少女為守衛而戰
- Angular專案路由配置與導航守衛Angular路由
- 基於Redis的簡易延時佇列Redis佇列
- 簡易實用的JavaScript日期時間操作!JavaScript
- [省選聯考 2024] 迷宮守衛 題解
- Java登陸第四十天——Router路由守衛Java路由
- 2.登入/退出功能(路由導航守衛)路由
- 蔣志皓:人工智慧成為疫情下人們的守衛者人工智慧
- 使用Go寫一個簡易的MVC的Web框架GoMVCWeb框架
- goioc:一個使用 Go 寫的簡易的 ioc 框架Go框架
- 使用 Docker 搭建簡易的 Java Web 環境 (二)DockerJavaWeb
- C#使用sqlite-net搭建簡易的ORMC#SQLiteORM
- 使用 Laravel 開發簡易的附近動態功能Laravel
- vue2.0全域性路由守衛(全域性控制登入)Vue路由
- 長安“戰疫”網路安全衛士守護賽writeup
- Angular入門到精通系列教程(13)- 路由守衛(Route Guards)Angular路由
- 不可不知 | 密碼法,守護在你身邊的安全衛士密碼
- Filecoin網路的守衛和建設支援FIL幣加價破千
- 2024-07-18 給vue專案新增自定義路由守衛Vue路由
- 網路視覺化守衛“數字中國“資訊保安視覺化
- 使用go搭建一個簡易的部落格系統Go
- Windows守護程式簡單示例Windows
- 對話守衛者蔣志皓:人工智慧和數字經濟,龍騰馬躍正當時人工智慧