Nextjs基础-动态博客（三）

Next的中间件与权限控制

前言

在spa单页开发的时候，我们可以通过react-router来进行路由拦截，实现权限控制，一般方案是向浏览器写入cookie，然后判断cookie中的token。那么在Next中呢？Next使用了中间件的方式，这个express中也有这个概念。用白话理解就是每次路由变换先经过中间件，无论这个组件是否被缓存。那么这个时候就可以通过中间件来进行鉴权。

中间件

import { NextResponse } from 'next/server'
 
// 如果在里面使用“等待”，这个函数可以标记为“异步”
export function middleware(request) {
  return NextResponse.redirect(new URL('/home', request.url))
}
 
// 请参阅下面的“匹配路径”以了解更多信息
export const config = {
  matcher: '/about/:path*',
}

这里是Next中的一个例子，里面包含一个middleware函数，一个config对象。这个代码你可能看的有些疑惑，什么是NextResponse.redirect？这个可以理解为在Next服务端中重定向的方法。没错，中间件的作用其实就是路由的调度。根据配置的信息，来看用户是否能通过这条路由。

匹配路径

匹配路径非常重要，有些路由需要中间件，有些路由不需要中间件，可以通过它来配置。

config是匹配器，如例子中的 matcher: '/about/:path*'就表示在about以及它下面的子路由，都经过中间件，那么其他的都不经过中间件。当然，它还可以写成一个数组的形式。不过很麻烦。这里还有第二种匹配路径的方式，写条件语句。

条件语句的方式就很像在写react类组件的componentDidUpDated生命周期。通过条件语句的方式对更新的状态做出判断，还能写多个条件语句处理不同的状态更新。

import { NextResponse } from 'next/server'
 
export function middleware(request) {
  if (request.nextUrl.pathname.startsWith('/about')) {
    return NextResponse.rewrite(new URL('/about-2', request.url))
  }
 
  if (request.nextUrl.pathname.startsWith('/dashboard')) {
    return NextResponse.rewrite(new URL('/dashboard/user', request.url))
  }
}

也非常好理解。

进行设置

中间件的作用如果只是在匹配路径进行鉴权可太大材小用了。对于每个api路由来说，他们也会经过中间件，所以每次请求就可以利用中间件进行操作。比如操作cookie，设置Headers，管理响应。

不过这些远没有鉴权重定向使用频繁。

细节

middleware这个js文件需要与app文件夹是同级目录，都在src下。