React中封装鉴权路由组件

目的

实现,用户没有token,不让进入指定的路由页面

正常情况下,使用路由规则

使用 react-router-dom中自带的Route,没有权限管理的功能

• path: 路由的匹配规则,地址,和组件是一个映射关系
• component: 匹配到路由规则后,要展示的组件内容
  注意: 组件你也可以不用写在component中,你可以使用双标签,将要展示的组件,当在双标签中包裹,效果都是一样的
  <Route path='/home' > <要展示的组件 /> </Route>
  

改造后

/* eslint-disable multiline-ternary */
import React from 'react'
import { hasToken } from '@/utils/storage'
import { Redirect, Route, RouteProps } from 'react-router-dom'
export default function PrivateRoute ({ children, ...rest }: RouteProps) {
  return (
    <Route
      {...rest}
      render={({ location }) =>
        hasToken() ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: '/login',
              state: { from: location.pathname }
            }}
          />
        )}
    />
  )
}

• 通过props接收,我这里做了一个解构,单独拎出来,写起来简洁点
• 同样,我们还是返回一个 Route组件
  
• hastoken 是我封装的判断用户是否有token,返回的是一个布尔值,如果没有token,执行重定向到 /login
• ...rest 是接收的path参数之类的,我上面使用 剩余参数接收,然后直接在Route标签中解构赋值并使用, 其实就是做一个转手的操作,你传给我,我转给他