Pengesahan berasaskan peranan menggunakan Nextauth dan next.js-tutorial js-php.cn

Pengesahan berasaskan peranan menggunakan Nextauth dan next.js

WBOY

Lepaskan： 2024-07-22 10:15:31

asal

755 orang telah melayarinya

Roles based authentication using Nextauth and next.js

Helo, jadi jika anda juga tertanya-tanya tentang sekutu gelap internet yang mencari penyelesaian berasaskan Auth dan peranan anda sendiri tetapi anda tidak menemui sebarang atau mungkin anda melakukannya, itu tidak bekerja lagi maka anda berada di tempat yang betul dengan kod berfungsi saya juga akan memberikan versi pakej supaya lebih mudah untuk anda semua.

sekarang mari kita pasang dahulu semua pakej yang anda perlukan

  npm install next-auth@beta
  npm install drizzle-orm zod react-hook-form

Salin selepas log masuk

sekarang mari kita sediakan pembekal pengesahan untuk nextAuth akan membuat fail dalam

kami

lib/auth/index.ts

dalam fail ini kami akan menggunakan pembekal bukti kelayakan kerana secara lalai OAuth tidak memberikan kami sebarang peranan tetapi kami juga akan melihat cara menggunakan oAuth untuk menetapkan peranan

  export const { handlers, signIn, signOut, auth } = NextAuth({
 adapter: DrizzleAdapter(db),
  providers: [
    Credentials({
      name: "credentials",
      credentials: {
        email: {
          type: "email",
          label: "Email Address",
          placeholder: "Email Address",
        },
        password: {
          type: "password",
          label: "Password",
        },
      },
      async authorize(credentials) {
        const { email, password } = await signInSchema.parseAsync(credentials);

        const user = await db
          .select()
          .from(users)
          .where(eq(users.email, email))
          .execute()
          .then((res) => res[0]);

        if (!user || !user.password) return null;

         const isValidPassword = await bcryptjs.compare(password, user.password);

         if (!isValidPassword) return null;

        return {
          id: user.id,
          name: user.name,
          email: user.email,
        };
      },
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,

      profile(profile: GoogleProfile) {
        return { ...profile, role: "user" };
      },
    })
  ],
});

Salin selepas log masuk

Mungkin ini masa yang baik untuk menyatakan bahawa saya menggunakan postgres dan drizzle ORM untuk menyimpan dan mendapatkan maklumat ini daripada DB.

kami menggunakan penyesuai gerimis untuknya anda boleh memasangnya menggunakan

npm install drizzle-orm @auth/drizzle-adapter
npm install drizzle-kit --save-dev

Salin selepas log masuk

anda boleh mencari skema yang sesuai dengan hujan renyai di sini pautan untuk pengesahan berfungsi. kini kita hanya perlu menggunakan pengendali ini dalam laluan api untuk menjadikannya berfungsi.

import { handlers } from "@/lib/auth";

export const { GET, POST } = handlers;

Salin selepas log masuk

kini pengesahan berfungsi tetapi belum ada peranan lagi. mula-mula kami akan mengubah suai skema gerimis dan kemudian pilihan nextAuth kami.

Ingat ini boleh menjadi medan mudah sebagai peranan dalam jadual pengguna yang memegang nilai rentetan . tetapi saya membuatnya seperti ini supaya saya boleh membuat seberapa banyak peranan yang saya mahu dan menambah kebenaran padanya

export const roles = pgTable("roles", {
  id: text("id")
    .primaryKey()
    .$defaultFn(() => createId()),
  name: text("name").notNull(),
  description: text("description"),
});

export const permissions = pgTable("permissions", {
  id: text("id")
    .primaryKey()
    .$defaultFn(() => createId()),
  name: text("name").notNull(),
  description: text("description"),
});

export const rolePermissions = pgTable("role_permissions", {
  roleId: text("roleId").references(() => roles.id, { onDelete: "cascade" }),
  permissionId: text("permissionId").references(() => permissions.id, {
    onDelete: "cascade",
  }),
});

export const userRoles = pgTable("user_roles", {
  userId: text("userId").references(() => users.id, { onDelete: "cascade" }),
  roleId: text("roleId").references(() => roles.id, { onDelete: "cascade" }),
});

Salin selepas log masuk

kini kita perlu mengubah suai NextAuthOption supaya peranan dan kebenaran disertakan dalam sesi pengguna.

mula-mula kita akan mentakrifkan fungsi panggil balik untuk mendapatkan peranan itu sendiri.

 callbacks: {
    async jwt({ token, user }) {
      if (user && user.id) {
        const { role, permissions } = await getUserRoleAndPermissions(user.id);
        token.role = role;
        token.permissions = permissions;
      }
      return token;
    },
    async session({ session, token }) {
      if (token && session.user) {
        session.user.id = token.id;
        session.user.role = token.role;
        session.user.permissions = token.permissions;
      }
      return session;
    },
  },

Salin selepas log masuk

Fungsi getRolesandPermission berfungsi tepat seperti kedengaran ia menggunakan hujan renyai-renyai untuk menanyakan peranan dan kebenaran daripada db . Secara lalai ini sahaja tidak akan berfungsi, kita juga perlu membuat beberapa perubahan dalam jenis.

declare module "next-auth" {
  interface Session {
    user: {
      id: string;
      role: string;
      permissions: string[];
    } & DefaultSession["user"];
  }
}

declare module "next-auth/jwt" {
  interface JWT {
    id: string;
    role: string;
    permissions: string[];
  }
}

Salin selepas log masuk

kini dengan mengakses sesi kami boleh mendapatkan peranan dan kebenaran. dan dengan menggunakan ini anda boleh menyekat pengguna di peringkat halaman atau dengan menggunakan perisian tengah seluruh kumpulan laluan yang anda boleh lindungi.

kaedah ini boleh sangat berguna dalam sass berbilang penyewa mungkin anda tidak mahu menyelamatkan pengguna anda di tempat lain ini adalah penyelesaian yang sempurna. Terima kasih kerana membaca ini

Atas ialah kandungan terperinci Pengesahan berasaskan peranan menggunakan Nextauth dan next.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!