vite-plugin-mock-auth 使用说明

开发环境下的 Mock 登录插件，适用于登录页面不在当前开发工程的场景。

适用场景

当你开发的功能模块需要登录态，但登录页面位于其他工程（如统一登录中心）时，可使用此插件快速模拟登录流程。

功能特性

• 🔐 提供独立的 Mock 登录页面
• 👤 支持预设账号一键登录
• 🔄 自动重定向到原页面
• 🏷️ 明显的开发环境标识，避免误用

插件使用方式

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { mockAuthPlugin } from '@pt/vite-plugins/mock-auth';

export default defineConfig({
  plugins: [
    vue(),
    mockAuthPlugin({
      loginPath: '/__mock-auth__',  // Mock 登录页路径
      // ... 更多详情请参见下方的实战配置
    }),
  ],
});

启动后效果

启动开发服务器后，终端会显示 Mock 登录页地址：

agent-hub:dev:   VITE v7.2.2  ready in 5085 ms
agent-hub:dev:
agent-hub:dev:   ➜  Local:      http://localhost:3630/agent-hub/
agent-hub:dev:   ➜  Mock Auth:  http://localhost:3630/__mock-auth__  ← 新增

Mock 登录页面功能

功能	说明
简洁的登录表单	用户名 + 密码输入
开发环境标识	明显的 DEV 标记，避免误用于生产环境
自动重定向	登录成功后跳转到原页面（支持 ?redirect= 参数）
快捷登录	可配置预设账号一键登录

与真实登录的差异

特性	真实登录	Mock 登录
密码验证	后端校验	任意密码通过
Token 来源	后端生成	本地生成 UUID
用户信息	后端返回	根据用户名生成
权限数据	后端查询	可配置默认权限

配置选项

选项	类型	默认值	说明
loginPath	string	'/__mock-auth__'	Mock 登录页面路径
enabled	boolean	true	是否启用插件
defaultRedirect	string	'/'	登录成功后默认跳转地址
presetAccounts	Array	[]	预设快捷登录账号

预设账号配置

通过 presetAccounts 配置预设账号，实现一键登录：

mockAuthPlugin({
  presetAccounts: [
    { label: '管理员', username: 'admin', password: '123456' },
    { label: '普通用户', username: 'user', password: '123456' },
    { label: '测试账号', username: 'test' },  // 密码可选
  ],
});

重定向支持

支持通过 URL 参数指定登录成功后的跳转地址：

http://localhost:3630/__mock-auth__?redirect=/dashboard

实战配置

1. 配置 Vite 插件

在 vite.config.ts 中添加插件配置：

// vite.config.ts
import { mockAuthPlugin } from '@pt/vite-plugins/mock-auth';

export default defineConfig({
  plugins: [
    // ... 其他插件
    mockAuthPlugin({
      loginPath: '/__mock-auth__',
      defaultRedirect: '/',
      presetAccounts: [
        { label: '管理员', username: '18629549911', password: 'Tudou2017' },
        { label: '普通用户', username: 'user', password: '123456' },
        { label: '测试账号', username: 'test' },
      ],
    }),
  ],
});

2. 修改登录跳转方法

在项目中封装登录 URL 获取方法，开发环境自动跳转到 Mock 登录页：

// utils/auth.ts
// 获取登录url
export const getLoginUrl = (isRedirect: boolean = true) => {
  if (import.meta.env.DEV) {
    storage.clear()
    // 开发环境跳转到 Mock 登录页
    return `/__mock-auth__?redirect=${encodeURIComponent(window.location.pathname + window.location.search)}`
  }
  const domain = document.domain
  //  see stackoverflow.com: a workaround for 'cookies not being set for localhost' is to simply not specify a domain attribute and let the browser use the default value
  const cookieDomain = /^[\d.]+$/.test(domain) ? domain : domain.replace(/^[a-z0-9-]+\./, '')

  // 获取当前环境
  const env = import.meta.env.VITE_ENV || ''

  // 根据环境决定子域名前缀
  // dev1 和 beta1 环境使用 console-dev1 或 console-beta1
  // 其他环境（prod、prod.aio）使用 console
  let subDomain = 'console'
  if (env === 'dev1') {
    subDomain = 'console-dev1'
  } else if (env === 'beta1') {
    subDomain = 'console-beta1'
  }

  return `${document.location.protocol}//${
    cookieDomain !== 'localhost'
      ? domain === cookieDomain
        ? domain + ':31011'
        : subDomain + '.' + cookieDomain
      : 'localhost:31001'
  }/login${isRedirect ? '?redirect=' + getSafeRedirectUrl() : ''}`
}

注意事项

安全提示

• 此插件仅用于开发环境，请勿在生产环境启用
• 预设账号仅用于免输入，实现快捷登录