ReactRouter-路由拦截

路由拦截

• 应用场景：鉴权，当用户进入到需要授权的组件时，这时候进行拦截，判断用户是否授权，如果授权则放行，正常跳转，如果非授权则重定向授权页面。

举个栗子

import React from 'react'
import { BrowserRouter, HashRouter, Redirect, Route, Switch } from 'react-router-dom'
import Center from '../view/Center'
import Login from '../view/Login'

const isAuth = ()=> { // 判断用户是否鉴权
  return sessionStorage.token
}
export default function IndexRouter(props) { // 配置路由
  return (
    <HashRouter>
      <Switch>
        // 当render函数被执行之后 会返回一个对象，对象里有编程式跳转方法，获取跳转过来的参数。。。可以再次传递给要渲染的组件使用，当使用component的属性时，Route会自动传给路由组件使用，如果是render需要自己手动传给路由组件
        <Route path='/center' render={(props)=> { // 当路径匹配会执行render函数准备渲染组件，这时候我们可以拦截，最终渲染什么组件我们可以控制
          // 判断用户是否鉴权，鉴权则跳center组件，否则重定向到登录页
          return isAuth() ? <Center {...props}></Center> : <Redirect to='/login'></Redirect>
        }}></Route>
        <Route path='/login' component={Login}></Route>
      </Switch>
    </HashRouter>
  )
}