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 语句，效果如下。

生成的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 全栈开发实战》专栏，感谢您的阅读。