DarkM

# 自定义登录组件

DarkM 支持自定义登录页面，满足不同企业的品牌和功能需求。

# 🎯 实现方式

# 步骤 1：创建登录组件

<!-- components/LoginCustom.vue -->
<template>
  <div class="login-custom">
    <div class="login-header">
      <img src="@/assets/logo.png" alt="Logo" />
      <h1>欢迎登录</h1>
    </div>
    
    <el-form :model="form" :rules="rules" ref="loginForm">
      <el-form-item prop="username">
        <el-input v-model="form.username" placeholder="用户名" />
      </el-form-item>
      
      <el-form-item prop="password">
        <el-input v-model="form.password" type="password" placeholder="密码" />
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="handleLogin" :loading="loading">
          登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'LoginCustom',
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      loading: false
    }
  },
  methods: {
    async handleLogin() {
      await this.$refs.loginForm.validate(async valid => {
        if (!valid) return
        
        this.loading = true
        try {
          await this.$store.dispatch('login', this.form)
          this.$message.success('登录成功')
          this.$router.push('/')
        } catch (error) {
          this.$message.error(error.message)
        } finally {
          this.loading = false
        }
      })
    }
  }
}
</script>

<style scoped>
.login-custom {
  max-width: 400px;
  margin: 100px auto;
  padding: 40px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

# 步骤 2：注册为全局组件

// main.js
import Vue from 'vue'
import LoginCustom from './components/LoginCustom.vue'

// 组件名称必须以 nm-login- 开头
Vue.component('nm-login-custom', LoginCustom)
1
2
3
4
5
6

# 步骤 3：配置登录组件

在系统配置页面选择登录组件：

  1. 登录系统
  2. 进入 系统管理 → 系统配置
  3. 选择 登录组件 为 nm-login-custom
  4. 保存配置

# 📋 命名规范

重要： 自定义登录组件名称必须以 nm-login- 开头

// ✅ 正确
Vue.component('nm-login-custom', LoginCustom)
Vue.component('nm-login-default', LoginDefault)
Vue.component('nm-login-sso', LoginSSO)

// ❌ 错误
Vue.component('login-custom', LoginCustom)  // 缺少 nm- 前缀
Vue.component('nm-login', Login)            // 缺少后缀
1
2
3
4
5
6
7
8

# 🎨 内置登录组件

组件 说明 适用场景
nm-login-default 默认登录 通用场景
nm-login-form 表单登录 简洁登录
nm-login-portal 门户登录 企业门户

# 🔧 高级用法

# SSO 单点登录

<template>
  <div class="login-sso">
    <el-button @click="handleSSOLogin">SSO 登录</el-button>
  </div>
</template>

<script>
export default {
  name: 'LoginSSO',
  methods: {
    handleSSOLogin() {
      // 跳转到 SSO 认证服务器
      window.location.href = 'https://sso.example.com/login?redirect=' + encodeURIComponent(window.location.origin)
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 扫码登录

<template>
  <div class="login-qrcode">
    <div v-if="!scanned">
      <p>请使用 APP 扫码登录</p>
      <img :src="qrcodeUrl" alt="QR Code" />
    </div>
    <div v-else>
      <p>扫码成功，正在登录...</p>
    </div>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11

# 📚 相关文档

最后更新: 2022-08-07

← Q&A →