Next.js 应用实现权限管理
文章为稀土掘金技术社区首发签约文章，14 天内禁止转载，14 天后未获授权禁止转载，侵权必究！
前言
在前面的文章中《使用 NextAuth.js 给 Next.js 应用添加鉴权与认证》，我们使用了 Github OAuth 和邮箱认证登录，我们的视频网站就有了用户系统，和用户系统离不开的，便是权限系统，今天我们就聊一聊权限系统的设计与实现，要在网站中实现复杂的权限管理对应新手来说，这可能会是比较困难的，但权限系统是软件中不可或缺的部分，我们只要掌握一个套路，就会变得非常简单，一起来看看吧！
权限区分
因为有了权限，我们可以在一个系统中实现各种各样的功能，系统也会变得庞大而复杂。一般可以将权限分为“功能权限”、“数据权限”和“字段权限”。
功能权限：用户具有哪些权利，例如特定数据的增、删、改、查等；比如在一个视频网站中，超级管理员拥有对所有视频的审核权限，而普通用户只能拥有对着自己视频的编辑和删除权限。功能权限需要前后端共同实现；
数据权限：用户可以看到哪些范围的主数据。比如视频网站中，VIP 用户可以看到 VIP 视频，而非 VIP 用户只能看普通视频。数据权限主要是后端实现；
字段权限：在特定的数据表中，可以看到哪些字段；比如普通用户能够看到其他用户的基本信息，但是看不到其它人的账户信息。字段权限也主要是由后端实现；
权限系统设计
我们可以将网站中的功能按角色划分，根据不同的角色来指定不同的权限，这便是大部分网站的实现方式。 比如在视频网站中我们可以将角色划分为：
前台角色
- 普通用户
- VIP 用户
我们可以在数据库中加入 2 个字段区分，User 表加入 isVip， Video 表加入 vip，prisma Schema 定义如下：
model User {
id String @id @default(cuid())
name String?
email String? @unique
isVip Boolean
emailVerified DateTime?
Video Video[]
}
model Video {
id Int @id @default(autoincrement())
title String @unique
vip Boolean
desc String?
}
那么我们通过接口就可以查出 Vip 视频。
import { authOptions } from '@/pages/api/auth/[...nextauth]'
import { unstable_getServerSession } from 'next-auth/next'
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const session = await unstable_getServerSession(req, res, authOptions)
if (!session) {
res.status(401).json({ message: 'You must be logged in.' })
return
}
const user = await prisma.user.findFirst({
where: {
id: session.id as string,
},
})
if (!user.isVip) {
res.status(401).json({ message: 'You are not vip user' })
return
}
const videos = await prisma.video.findMany({
where: {
vip: true,
},
})
}
上面代码中，先通过 session 获得用户 id，再查询用户是否为 vip，若为 vip 则查询出 vip 视频，不是则返回 401。
后台角色
- 视频管理员：用于视频审核，对不合法的视频进行下架。
- 超级管理员：拥有所有权限，用户管理、视频管理等
备注：由于系统比较简单，我们将前台后台的用户系统使用同一个，只要在数据库中设置一个字段
isAdmin，然后在页面上根据这个字段显示后台管理入口，就可以实现管理视频啦。
一般情况下，我们需要给网站添加 2 张表：一张是角色表（Rule）、一张是权限表（Permission），角色和权限的关系是多对多的关系，一个角色可以有多个权限，一个权限也可以赋给多个角色， 因此需要加入第三章表关联表，在 Prisma 中，关联表一般使用 TablesOnTables的形式设计，使用 @relation关联表中的附键，下面代码就是 prisma Schema 代码
model User {
id String @id @default(cuid())
name String?
email String? @unique
roleId String?
role Role? @relation(fields: [roleId], references: [id])
}
model Role {
id String @id @default(cuid())
name String
PermissionsOnRoles PermissionsOnRoles[]
User User[]
}
model Permission {
id String @id @default(cuid())
pid String?
name String
code String
PermissionsOnRoles PermissionsOnRoles[]
}
model PermissionsOnRoles {
role Role @relation(fields: [roleId], references: [id])
roleId String
permission Permission @relation(fields: [permissionId], references: [id])
permissionId String
assignedAt DateTime @default(now())
@@id([roleId, permissionId])
}
在 prisma/schema.prisma文件中修改 schema， 修改完 prisma schema 后，执行以下命令，我们便可以往数据库迁移，生成真实的表。
npx prisma migrate dev
执行后，会在 prisma/migrations/*/migration.sql 文件下生成 Sql 语句，效果如下。
系统中，一般权限数据都数据库内置的，因此需要新建一个seed.ts文件，可以方便我们往默认数据库插入数据
import { PrismaClient } from '@prisma/client'
// initialize Prisma Client
const prisma = new PrismaClient()
async function main() {
await prisma.permission.createMany({
data: [
{
name: '用户管理',
code: 'user_management',
},
{
name: '视频管理',
code: 'video_management',
},
],
})
await prisma.role.create({
data: {
name: '超级管理员',
permissions: {
create: [
{
assignedAt: new Date(),
permission: {
connect: {
code: 'video_management',
},
},
},
{
assignedAt: new Date(),
permission: {
connect: {
code: 'user_management',
},
},
},
],
},
},
})
await prisma.role.create({
data: {
name: '视频管理员',
permissions: {
create: [
{
assignedAt: new Date(),
permission: {
connect: {
code: 'video_management',
},
},
},
],
},
},
})
}
main()
.catch((e) => {
console.error(e)
process.exit(1)
})
.finally(async () => {
// close Prisma Client at the end
await prisma.$disconnect()
})
执行npx ts-node prisma/seed.ts，就可以初始化角色和权限数据了，上述代码中我们设置了 2 个角色，分别为超级管理员和视频管理员，添加了 2 个权限分别为视频管理和用户管理并且设置了唯一键 code，code 可以拥有前端权限的判断。
后端接口设计
有了数据库和数据我们便可以实现一个接口，“用户信息接口”，我们将它定义为/api/user/me，用于返回权限信息
新建一个pages/api/me.ts 文件, 代码如下
import { authOptions } from '@/pages/api/auth/[...nextauth]'
import { unstable_getServerSession } from 'next-auth/next'
import prisma from '@/lib/prisma'
import { makeSerializable } from '@/lib/util'
import { NextApiRequest, NextApiResponse } from 'next'
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const session = await unstable_getServerSession(req, res, authOptions)
if (!session) {
res.status(401).json({ message: 'You must be logged in.' })
return
}
const user = await prisma.user.findFirst({
where: {
id: session.id as string,
},
})
const permissionsOnRoles = await prisma.permissionsOnRoles.findMany({
where: {
roleId: user.roleId,
},
})
const ids = permissionsOnRoles.map((item) => item.permissionId)
const permissions = await prisma.permission.findMany({
where: {
id: {
in: ids,
},
},
})
return res.json({
user,
permissions,
})
}
上面的代码中，查询步骤为：
- 先通过 session 获得用户 id
- 通过用户 id 查询用户信息，获得角色 id
- 通过角色 id 查询关联表，获得权限 id
- 再通过权限 id 查询权限信息。
以上代码便是多对多查询过程，访问接口，就可以获得当前用户的权限信息了。
那么前端就可以通过该接口来判断功能权限了，至此后端权限部分就完成了。
React 中实现权限管理
在 React 中实现状态管理，我们可以在整个 App 组件（跟组件）渲染前选请求me接口，然后通过 React Context 将 permission 信息进行全局状态管理，这样我们就可以在任意组件获取权限信息，进行权限判断了。
import React, { useContext, useEffect } from 'react'
import axios from 'axios'
import { createBrowserRouter, RouterProvider, Route, Outlet } from 'react-router-dom'
const PermissionContext = React.createContext([])
const usePermission = function () {
return useContext(PermissionContext)
}
function Permission({ code, children }) {
const permissions = usePermission()
if (permissions.includes(code)) {
return children
}
return null
}
export default function App() {
const [permissions, setPermissions] = React.useState([])
useEffect(() => {
axios.get('/api/user/me').then((res) => {
const permissions = res.data.map((item) => item.code)
setPermissions(permissions)
})
}, [])
return (
<div>
<PermissionContext.Provider value={permissions}>
<RouterProvider router={router} />
PermissionContext.Provider>
div>
)
}
上面代码中，我们创建了一个我们定义了一个Permission组件，那么在项目中，只要在要判断权限的地方使用该组件，若没有权限，则会不显示。我们还定义了一个usePermission 自定义 hooks，这样在后续开发中，若要使用到权限，我们就可以直接使用这个 Hooks，界面 UI 也可以重新定义了。
比如在 React-router 路由（V6）中，直接嵌套一个Permission 组件便可以实现权限控制了。
const router = createBrowserRouter([
{
path: '/',
element: <div>首页div>,
},
{
path: '/login',
element: <div>登录div>,
},
{
path: '/admin',
element: (
<div>
后台管理 <Outlet />
div>
),
children: [
{
path: 'user',
element: (
<Permission code="user_management">
<div>用户管理div>
Permission>
),
},
{
path: 'video',
element: (
<Permission code="user_management">
<div>视频管理div>
Permission>
),
},
],
},
])
Next.js 实现权限管理
在 Next.js 中，我们可以同 React 一样的方式来实现权限控制。若是服务端渲染的页面，我们也可以在服务端控制。
import { authOptions } from '@/pages/api/auth/[...nextauth]'
import { unstable_getServerSession } from 'next-auth/next'
import prisma from '@/lib/prisma'
import { makeSerializable } from '@/lib/util'
export async function getServerSideProps(context) {
const session = await unstable_getServerSession(context.req, context.res, authOptions)
if (!session) {
return {
redirect: {
destination: '/403',
permanent: false,
},
}
}
//const permissions = prisma query
if (!permissions.includes('video_management')) {
return {
props: {
errorCode: 403,
},
}
}
const data = await prisma.video.findMany({
include: { author: true },
})
return {
props: {
session,
data: makeSerializable(data),
},
}
}
同接口的方式一致，我们也可以在 getServerSideProps 通过获得 session，然后获得用户权限，再通过权限判断，是否让页面显示 403。
那如果有多个页面有需要权限判断，该怎么办呢？我们可以在根目录下建立一个middleware.js, 中间件会在每个请求的时候执行。
import { getToken } from "next-auth/jwt"
import { NextResponse } from "next/server"
export async function middleware(req) {
// 如果url不应该受到保护，请尽早返回
if (!req.url.includes("/protected-url")) {
return NextResponse.next()
}
const session = await getToken({ req, secret: process.env.SECRET })
if (!session) return NextResponse.redirect("/api/auth/signin")
...
// 如果授权通过则继续。
return NextResponse.next()
}
在中间件中，我们也可以获得session，那么与 api 接口一样，就可以在中间件中判断权限信息了，有一点需要注意的是，Url 不需要权限判断，我们应该尽早返回，这样可以避免多余的查询。
小结
本文以视频网站为例，讲解了权限系统的设计与实现，主要涉及到的知识点有：
- 后端基于角色表和权限表，多对多表结构设计
- Prisma 中实现多对多关系查询
- 前端使用 React Context 和 自定义 hooks 实现全局状态管理
- 利用 Next.js 的 middleware 也可以获得 session，并且用于权限判断。
好了，以上就是本文的全部内容，你学会了吗？接下来我将继续分享 Next.js 相关的实战文章，欢迎各位关注我的《Next.js 全栈开发实战》 专栏，感谢您的阅读。
