Payload CMS管理后台仅显示登录页，如何启用注册入口？

问题背景 #

使用Payload CMS结合Next.js与MongoDB搭建电商网站，将管理后台端点设置为/sell，但访问该端点时仅显示登录页面，无注册选项，导致无法查看数据库集合。

提供的配置代码 #

payload.config.ts #

import { webpackBundler } from '@payloadcms/bundler-webpack';
import { mongooseAdapter } from '@payloadcms/db-mongodb';
import { slateEditor } from '@payloadcms/richtext-slate';
import dotenv from 'dotenv';
import path from 'path';
import { buildConfig } from 'payload/config';
import { Users } from './collections/Users';

dotenv.config({
    path: path.resolve(__dirname, '../.env')
});

export default buildConfig({
    serverURL: process.env.NEXT_PUBLICK_SERVER_URL || '',
    collections: [Users],
    routes: {
        admin: '/sell'
    },
    admin: {
        user: 'users',
        bundler: webpackBundler(),
        meta: {
            titleSuffix: '- Shopvista',
            favicon: '/favicon.ico',
            ogImage: '/thumbnail.jpg'
        }
    },
    rateLimit: {
        max: 2000,
    },
    db: mongooseAdapter({
        url: process.env.MONGODB_URL!,
    }),
    editor: slateEditor({}),
    typescript: {
        outputFile: path.resolve(__dirname, 'payload-types.ts')
    }, 
})

Users集合代码 #

import { Access, CollectionConfig } from 'payload/types'

const adminsAndUser: Access = ({ req: { user } }) => {
  if (user.role === 'admin') return true

  return {
    id: {
      equals: user.id,
    },
  }
}

export const Users: CollectionConfig = {
  slug: 'users',
  auth: true,
  access: {
    read: adminsAndUser,
    create: () => true,
    update: ({ req }) => req.user.role === 'admin',
    delete: ({ req }) => req.user.role === 'admin',
    
  },
  admin: {
    hidden: ({ user }) => user.role !== 'admin',
    defaultColumns: ['id'],
  },
  fields: [
    {
      name: 'role',
      defaultValue: 'user',
      required: true,

      type: 'select',
      options: [
        { label: 'Admin', value: 'admin' },
        { label: 'User', value: 'user' },
      ],
    },
  ],
}

错误排查与修复方案 #

1. 未开启注册入口 #

Payload CMS默认不会在登录页面显示注册入口，需要在Users集合的auth配置中显式启用注册功能。修改Users集合的auth字段：

auth: {
  register: true, // 开启注册入口
},

如果需要更精细控制，比如自定义注册后跳转地址，可以扩展配置：

auth: {
  register: true,
  registerRedirect: '/sell', // 注册成功后跳转到后台首页
},

2. 环境变量拼写错误 #

payload.config.ts中serverURL使用了错误的环境变量名NEXT_PUBLICK_SERVER_URL（多了一个字母K），正确应为NEXT_PUBLIC_SERVER_URL。这个错误会导致Payload前后端通信异常，可能影响注册功能的加载：

serverURL: process.env.NEXT_PUBLIC_SERVER_URL || '',

3. 普通用户无法访问后台集合 #

当前Users集合配置中，admin.hidden设置为非admin用户隐藏该集合，且你目前只配置了Users这一个集合。即使注册了普通用户，登录后也看不到任何集合。解决方式：

• 创建初始管理员用户：可以通过Payload的种子数据或直接在MongoDB数据库中手动插入一个admin角色的用户。示例种子数据（创建seed.ts文件）：

  import payload from 'payload';
  import { User } from './payload-types';
  
  require('dotenv').config();
  
  const createAdminUser = async () => {
    await payload.init({
      secret: process.env.PAYLOAD_SECRET!,
      mongooseURL: process.env.MONGODB_URL!,
      local: true,
    });
  
    const adminUser: Partial<User> = {
      email: 'admin@example.com',
      password: 'your-strong-password',
      role: 'admin',
    };
  
    await payload.create({
      collection: 'users',
      data: adminUser,
    });
  
    console.log('Admin user created successfully');
    process.exit(0);
  };
  
  createAdminUser().catch(err => {
    console.error(err);
    process.exit(1);
  });
  

  运行npx ts-node seed.ts即可创建管理员用户，登录后就能看到Users集合。
• 调整集合可见性：如果需要普通用户访问其他集合，需在对应集合的admin.hidden配置中修改逻辑，或添加其他集合到collections数组中。

内容的提问来源于stack exchange，提问作者Code Eagle