只要 15 行代码就能在 React 中实现路由登录鉴权？

没错，就这 15 行：

import { Middleware } from 'oh-router'
export class LoginCheckMiddleware extends Middleware {
  async handler(ctx, next) {
    const token = localStorage.getItem("token")
    if (token) {
      next()
    } else {
      router.navigate("/login")
    }
  }

  register({ to }) {
    return to.meta.mustLogin === true
  }
}

哈哈哈，稍微标题党了点，但核心代码真的只有这 15 行

我们来看一下代码，这是一个 oh-router 的路由中间件，它在 handler 方法中获取了用户的 token 来判断用户是否登录：

如果 token 存在的话，则表示用户登陆了，执行 next() 方法，允许进入页面
如果 token 不存在的话，则表示用户没有登录，执行 router.navigate('/login') 导航方法，进入登录页

然后再看一下 register 方法，他会在每次一页面跳转的时候执行，这个方法如果返回 true 则表示为当前进入的页面注册该中间件，然后 handler 方法就会被执行，上面这个登录鉴权的案例中我们判断当前路由页面的 meta.mustLogin 字段是否为 true，为 true 则注册该中间件，进行登录检查，meta 是在配置路由页面的时候定义，我们来看一下路由是怎么配置的：

import { Router } from 'oh-router'
export const router = new Router({
  middlewares: [new LoginCheckMiddleware()],  // 需要把登录检查的中间件配置到这个数组中
  routes: [ // routes 字段中配置路由页面
    { path: '/', element: <Home/> },
    { path: '/login', element: <Login/> },
    { path: '/user', element: <User/>, meta: { mustLogin: true } }, // 用户页需要登录，在 meta 中配置 mustLogin 为 true
    { path: '/setting', element: <Setting/>, meta: { mustLogin: true } }, // 设置页同上
  ]
})

你可能会有点疑惑，这还是 React 吗？都是 js 代码啊，除了上面配置组件是 jsx，没看到怎么应用到组件中啊。。

其实只需要通过 oh-router-react 中导出的 RouterView 就可以桥接到 React 中：

import { RouterView } from "oh-router-react" 
import React from "react"
import ReactDOM from "react-dom/client"
import { router } from "./router" // 导入我们创建 Router 对象

ReactDOM
  .createRoot(document.getElementById("root")!)
  .render(<RouterView router={router} />) // 在这里通过 RouterView 组件就可以桥接到 React 中

至此整个路由就开始工作了，完美！！

15 行代码在 React 中实现路由登录鉴权

只要 15 行代码就能在 React 中实现路由登录鉴权？