自定义全局守卫与自定义元信息

自定义全局守卫

可以通过给根组件进行包裹的方式来实现全局守卫的功能，即访问根组件下面的所有子组件都要先通过守卫进行操作。

在/src/components/BeforeEach.jsx下创建守卫的组件。继续进行BeforeEach.jsx代码的编写。

import React from 'react'
import { Navigate } from 'react-router-dom'
import { routes } from '../../router';
export default function BeforeEach(props) {
  if(true){
    return <Navigate to="/login" />
  }
  else{
    return (
      <div>{ props.children }</div>
    )
  }
}

根据判断的结果，是否进入到组件内，还是重定向到其他的组件内。

接下来就是怎么样去调用BeforeEach.jsx，通过路由配置文件引入，如下：

export const routes = [
  {
    path: '/',
    element: <BeforeEach><App /></BeforeEach>
  }
]

自定义元信息

一般情况下，不同的路由获取到的信息是不一样的，可以通过自定义元信息来完成操作。

{
    path: 'about',
    element: <About />,
    meta: { title: 'about' },
    children: [
        {
            path: 'foo/:id',
            element: <Foo />,
            meta: { title: 'foo', auth: false },
        },
        {
            path: 'bar',
            element: <Bar />,
            meta: { title: 'bar', auth: true },
        }
    ]
}

这样可以通过全局守卫BeforeEach.jsx来获取到meta元信息的数据，需要配合useLocation和matchRoutes这两个方法。

import React from 'react'
import { useLocation, matchRoutes, Navigate } from 'react-router-dom'
import { routes } from '../../router';
export default function BeforeEach(props) {
  const location = useLocation();
  const matchs = matchRoutes(routes, location)
  const meta = matchs[matchs.length-1].route.meta
  if(meta.auth){
    return <Navigate to="/login" />
  }
  else{
    return (
      <div>{ props.children }</div>
    )
  }
}