什么是路由守卫？

路由跳转前做一些验证，比如登录验证，是网站中的普遍需求
导航守卫（navigation-guards）这个名字，听起来怪怪的，但既然官方文档是这样翻译的，就姑且这么叫吧

privateRoute.tsx

我们在src/util下面增加了一个路由守卫的工具,只需要把他引入到您的router文件中，替换之前的route组件即可

具体实现

  1. import { Route, Redirect, RouteProps } from 'react-router-dom';
  2. import * as React from "react";
  5. export interface PrivateRouteProps extends RouteProps {
  6.   component: React.ComponentType<any>
  7.   isSignIn: boolean
  8.   isIndex?: boolean
  9. }
  11. export const PrivateRoute = (props: PrivateRouteProps) => {
  12.   let { component: Component, isSignIn, ...rest } = props;
  13.   return (
  14.     <Route
  15.   { ...rest }
  16.   render = { props => isSignIn === true ? <Component { ...props } /> : <Redirect to='/login' />}
  17. />)
  18. }

主要是对Route做了一次简单封装,可在App.tsx验证用户是否拥有访问权限，若为false 则强制跳转/login