求助：基于Devias仪表盘实现Next.js与MongoDB的JWT集成

寻求后端开发者协助，基于已购买的Devias admin dashboard，实现Next.js与MongoDB的集成。当前项目已具备基础认证文件，但使用模拟数据，希望根据Devias指南正确配置JWT认证及数据库读取功能，未找到相关配置文档，寻求有相关经验者帮助。

现有代码文件 #

src/api/auth/index.js #

import { createResourceId } from '../../utils/create-resource-id';
import { decode, JWT_EXPIRES_IN, JWT_SECRET, sign } from '../../utils/jwt';
import { wait } from '../../utils/wait';
import { users } from './data';

class AuthApi {
  async signIn(request) {
    const { email, password } = request;

    await wait(500);

    return new Promise((resolve, reject) => {
      try {
        // 查找用户
        const user = users.find((user) => user.email === email);

        if (!user || (user.password !== password)) {
          reject(new Error('Please check your email and password'));
          return;
        }

        // 创建访问令牌
        const accessToken = sign({ userId: user.id }, JWT_SECRET, { expiresIn: JWT_EXPIRES_IN });

        resolve({ accessToken });
      } catch (err) {
        console.error('[Auth Api]: ', err);
        reject(new Error('Internal server error'));
      }
    });
  }

  async signUp(request) {
    const { email, name, password } = request;

    await wait(1000);

    return new Promise((resolve, reject) => {
      try {
        // 检查用户是否已存在
        let user = users.find((user) => user.email === email);

        if (user) {
          reject(new Error('User already exists'));
          return;
        }

        user = {
          id: createResourceId(),
          avatar: undefined,
          email,
          name,
          password,
          plan: 'Standard'
        };

        users.push(user);

        const accessToken = sign({ userId: user.id }, JWT_SECRET, { expiresIn: JWT_EXPIRES_IN });

        resolve({ accessToken });
      } catch (err) {
        console.error('[Auth Api]: ', err);
        reject(new Error('Internal server error'));
      }
    });
  }

  me(request) {
    const { accessToken } = request;

    return new Promise((resolve, reject) => {
      try {
        // 解码访问令牌
        const { userId } = decode(accessToken);

        // 查找用户
        const user = users.find((user) => user.id === userId);

        if (!user) {
          reject(new Error('Invalid authorization token'));
          return;
        }

        resolve({
          id: user.id,
          avatar: user.avatar,
          email: user.email,
          name: user.name,
          plan: user.plan
        });
      } catch (err) {
        console.error('[Auth Api]: ', err);
        reject(new Error('Internal server error'));
      }
    });
  }
}

export const authApi = new AuthApi();

src/api/auth/data.js #

export const users = [
  {
    id: '5e86809283e28b96d2d38537',
    avatar: '/assets/avatars/avatar-anika-visser.png',
    email: 'demo@devias.io',
    name: 'Anika Visser',
    password: 'Password123!',
    plan: 'Premium'
  }
];

相关文档：JSON Web Token (JWT) #

大多数认证提供商底层都会采用JWT策略生成访问令牌。当前应用没有后端服务，认证功能是通过HTTP客户端拦截器模拟实现的，基础但可作为开发起点。

实现方式 #

令牌应在后端服务器生成，当前项目用src/utils/jwt里的加密、编码和解码工具方法实现了模拟，但这些工具不能在客户端环境使用，仅用于开发阶段，正式环境必须移除或避免调用。

如何使用JWT Provider #

应用默认采用JWT Provider作为认证策略，若之前修改或移除过，按以下步骤恢复：

• 步骤1：导入Provider
  打开src/pages/_app.js文件，导入Provider并包裹App组件：

// src/pages/_app.js
import { AuthConsumer, AuthProvider } from '../contexts/auth/jwt-context';

const App = (props) => {
  const { Component, pageProps } = props;
    
  return (
    <AuthProvider>
      <Component {...pageProps} />
    </AuthProvider>
  );
};

• 步骤2：设置Hook上下文
  打开src/hooks/use-auth.js文件，替换为以下代码：

import { AuthContext } from '../contexts/auth/jwt-context';

如何使用认证功能 #

获取用户信息

以下示例展示如何在任意组件中获取用户信息，只需导入useAuth Hook即可：

// src/pages/index.js
import { useAuth } from '../hooks/use-auth';

const Page = () => {
  const { user } = useAuth();

  return (
    <div>
      邮箱: {user.email}
    </div>
  );
};

认证操作方法

以下是登录操作的示例代码，实际实现可参考项目内组件：

// src/pages/index.js
import { useAuth } from '../hooks/use-auth';

const Page = () => {
  const { login } = useAuth();
  
  const handleLogin = () => {
    // 传入邮箱/用户名和密码
    login('demo@devias.io', 'Password123!');
  };

  return (
    <div>
      <button onClick={handleLogin}>
        登录
      </button>
    </div>
  );
};

已实现流程 #

当前应用仅覆盖核心认证流程：

• 注册
• 登录
• 登出

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