Smart Vocational Education - Unified User Center

Project Introduction

The Smart Vocational Education Unified User Center is a user authentication and management system developed based on Vue 2.x, providing multiple login methods and comprehensive user information management features.

Technology Stack

• Framework: Vue 2.6.14
• UI Component Library: Element UI 2.15.10
• Router: Vue Router 3.4.9
• HTTP Client: Axios 0.24.0
• Style Preprocessor: Sass
• QR Code Generation: qrcodejs2
• Cloud Storage: ali-oss

Core Features

1. Multiple Login Methods

Account Password Login

• Support username/password login
• Integrated slider CAPTCHA protection
• Weak password detection and forced modification

Mobile Verification Code Login

• Support domestic and international mobile number login
• International area code selection (supports 200+ countries/regions worldwide)
• SMS verification code validation
• Multiple account management for one mobile number
• Automatic unbinding reminder for long-term inactive accounts

Email Login

• Support email verification code login
• Automatic registration for new users
• International user-friendly

QR Code Scan Login

• WeChat scan login
• App scan login
• Real-time status updates (not scanned/scanned/confirmed/expired)
• Automatic QR code refresh mechanism
• Automatic account binding after scanning

2. User Information Management

Complete User Information

• Identity type selection (Student/Teacher/Social Learner/Enterprise User/International Learner/International Teacher)
• Nationality selection (supports Chinese and English search)
• Remote search for organization name
• Real name input
• Employee/Student ID management
• Mandatory information completion on first login

Mobile Number Binding

• New user mobile number binding
• Existing account mobile number change
• Multiple account binding management
• International mobile number support

Password Management

• Forced modification of weak passwords
• Password strength validation (must contain three of four character types: uppercase, lowercase, numbers, special characters, length 8-50)
• First-time login password setup for users with empty passwords

3. Internationalization Support

• Chinese and English bilingual switching
• Component-level internationalization configuration
• Automatic browser language detection
• Nationality data in Chinese and English

4. Security Features

• Slider CAPTCHA protection
• Aliyun CAPTCHA integration
• Login status encryption
• Token authentication mechanism
• Multiple account security reminders
• Automatic unbinding of long-term inactive accounts

5. User Experience Optimization

• Responsive design, mobile support
• Smooth animation transitions
• Intelligent form validation
• Floating label input fields
• Alphabetical index for quick navigation
• Search highlighting

Project Structure

src/
├── api/                          # API interfaces
│   └── resourceManagement/
│       ├── index.js             # Unified API export
│       └── login.js             # Login-related APIs
├── components/                   # Components
│   ├── userCenterLogin.vue      # Main login component
│   ├── QRCodeLogin.vue          # QR code login component
│   ├── mobileBinding.vue        # Mobile binding component
│   ├── improveInformation.vue   # Complete information component
│   ├── NationalitySelector.vue  # Nationality selector component
│   ├── agreement.vue            # User agreement component
│   ├── verifyComponents.vue     # Verification code component
│   ├── AliyunCaptchaModal.vue   # Aliyun CAPTCHA component
│   ├── TJCaptcha.vue            # Tencent CAPTCHA component
│   └── locales/                 # Internationalization language packs
│       ├── zh-CN.json           # Chinese language pack
│       └── en.json              # English language pack
├── utils/                        # Utility functions
│   ├── auth.js                  # Authentication utilities
│   ├── i18n.js                  # Internationalization utilities
│   ├── request.js               # Request wrapper
│   └── errorCode.js             # Error code definitions
├── App.vue                       # Root component
└── main.js                       # Entry file

Installation

1. Clone the Project

git clone [project-url]
cd icve_tyyhzx

2. Install Dependencies

npm install

3. Configure Environment Variables

Create .env.development and .env.production files and configure the corresponding environment variables.

4. Start Development Server

npm run serve

5. Build for Production

npm run build

Usage Instructions

Use as Standalone Application

Run the project directly and access the login page to use all features.

Use as Component Library

The project supports packaging as a component library and can be imported into other projects:

import IcveSso from 'icve-sso';
import 'icve-sso/dist/icve-sso.css';

Vue.use(IcveSso);

Component Usage Example

<template>
  <div>
    <!-- Login Component -->
    <userCenterLogin :loginModalShow="true" @loginSuccess="handleLoginSuccess" />
  </div>
</template>

<script>
import { userCenterLogin } from 'icve-sso';

export default {
  components: {
    userCenterLogin,
  },
  methods: {
    handleLoginSuccess(token) {
      console.log('Login successful, token:', token);
      // Handle login success logic
    },
  },
};
</script>

API Documentation

Login-related APIs

• userLogin - Account password login
• smsLogin - Mobile verification code login
• smsLoginCaptcha - Send SMS verification code
• emailRegister - Email login/registration
• sendEmailMsg - Send email verification code
• generateQrCode - Generate QR code
• checkCodeStatus - Check QR code status
• loginBindWechat - WeChat binding login

User Information APIs

• getInfo - Get user information
• saveUserInfo - Save user information
• BindMobileV2 - Bind mobile number
• changeBindMobileV2 - Change bound mobile number

Other APIs

• gjList - Get nationality list
• getDw - Get organization list
• featuresBySource - Get feature permissions
• userEncrypt - User information encryption

Configuration

Internationalization Configuration

Configure language packs in src/utils/i18n.js:

import zhCN from '@/components/locales/zh-CN.json';
import en from '@/components/locales/en.json';

const messages = {
  cn: zhCN,
  en: en,
};

Router Configuration

Configure routes in src/router according to business requirements.

Browser Support

• Chrome (Recommended)
• Firefox
• Safari
• Edge
• IE 11+

Contribution

1. Fork the repository
2. Create Feat_xxx branch
3. Commit your code
4. Create Pull Request

Version History

v0.0.31 (Current Version)

• ✨ Added QR code scan login feature
• ✨ Added nationality selector component
• ✨ Added mobile number binding feature
• ✨ Added complete user information feature
• ✨ Added email login feature
• ✨ Added multi-language support (Chinese and English)
• ✨ Added weak password detection and forced modification
• ✨ Added multiple account management feature
• 🐛 Fixed known issues
• 💄 Optimized UI interaction experience

License

[Fill in according to actual project situation]

Contact

If you have any questions or suggestions, please contact us through:

• Submit an Issue
• Send email to: [email address]