如何实现路由鉴权

前言

React-Router 是React生态里面很重要的一环，现在React的单页应用的路由基本都是前端自己管理的，而不像以前是后端路由，React管理路由的库常用的就是就是 React-Router 。本文想写一下 React-Router 的使用，但是光介绍API又太平淡了，我这里就用一个常见的开发场景来看看 React-Router 是怎么用的吧。而我们一般的系统都会有用户访问权限的限制，某些页面可能需要用户具有一定的权限才能访问。本文就是用 React-Router来实现一个前端鉴权模型。

可以依照官方文档查看

react中并没有路由守卫，就有了路由鉴权的解决方案

这应该是非常常见的使用场景，举例来说app内有部分页面只允许已登录用户访问，当路由跳转到这些页面前，会执行一次检查，如果没有登录则replace到登录页面

这个检查应该在访问对应路由前执行，所以检查方法不能放在目标页面里

如何自己封装一个路由鉴权呢

用法:首先定义一个PrivateRoute组件 将需要鉴权的组件包裹再写入path为指定的路径

代码如下

  <PrivateRoute path="/profile/edit">
    <Edit />
    </PrivateRoute>

封装鉴权组件:代码如下

简单逻辑可以理解为:

如果有token值则返回path穿过来的数据为/profile/edit

没有token值则返回到/login页面即登录页

import { hasToken } from '@/utils/storage'
import { Route, Redirect, RouteProps } from 'react-router-dom'

export const PrivateRoute = ({ children, ...rest }: RouteProps) => {
  console.log(rest)
  //   const { children, ...rest } = obj
  return (
    <Route
      {...rest}
      render={props => {
        // 如果有token就渲染 children
        if (hasToken()) {
          return children
        }
        return (
          <Redirect
            to={{
              pathname: '/login',
              state: {
                from: props.location.pathname // 回跳地址
              }
            }}
          />
        )
      }}
    />
  )
}