【前端登录】业务方式全解析：从传统到现代，涵盖 Vue、React、Angular、jQuery 与原生 JS 最佳实践

06-01 1054阅读

🧩 前端登录方式全解析：从传统到现代，涵盖 Vue、React、Angular、jQuery 与原生 JS 最佳实践

登录功能是前端开发中最常见的交互之一，但实现方式多种多样，每种方式适用于不同的业务场景和安全需求。

本文老曹将系统总结前端支持的所有登录方式，包括：

传统账号密码登录
第三方登录（微信、QQ、GitHub 等）
手机验证码登录
邮箱验证码登录
单点登录（SSO）
OAuth2 登录
JWT Token 登录
免密登录（扫码/指纹/人脸识别）

一键登录（运营商手机号直连）

最后给大家提供 Vue、React、Angular、jQuery 和原生 JavaScript 的最佳实践示例。

✅ 一、前端登录的常见方式汇总

登录方式	描述	安全性	使用场景
账号密码登录	用户输入用户名和密码进行登录	中等（需加密）	普通 Web 应用
手机验证码登录	输入手机号 + 收到短信验证码	高	APP、电商、金融类应用
邮箱验证码登录	输入邮箱 + 收到邮件验证码	高	注册验证、找回密码
第三方登录	如微信、QQ、GitHub、Google 登录	高（OAuth2）	快速注册、降低用户门槛
单点登录（SSO）	多个系统共享一个登录状态	高	企业内部多个系统统一认证
OAuth2 登录	授权机制，常用于第三方平台接入	高	开放平台、API 接入
JWT Token 登录	后端返回 Token，前端存储并携带请求	高（需防泄露）	前后端分离项目
免密登录（扫码/生物识别）	微信扫码登录、FaceID、指纹登录	高	移动端或安全性要求高的系统
一键登录（运营商手机号直连）	运营商授权获取手机号直接登录	高	APP 快速登录
记住我（自动登录）	localStorage 存储 Token 实现自动登录	中	PC 端记住登录状态

🔐 二、不同登录方式的技术实现简述

1. 账号密码登录

// 前端发送 POST 请求
// 使用fetch API发起一个POST请求到'/api/login'端点
fetch('/api/login', {
  method: 'POST',   // 指定请求方法为POST（用于提交数据）
  headers: {        // 设置请求头，声明发送的数据类型为JSON格式
    'Content-Type': 'application/json' 
  },  
  // 将JavaScript对象{ username, password }序列化为JSON字符串，作为请求体发送
  body: JSON.stringify({ username, password }),
});

后端返回 Token，前端保存至 localStorage 或 Vuex/Pinia。

2. 手机/邮箱验证码登录

// 发送验证码
fetch('/api/send-code', {
  method: 'POST',
  body: JSON.stringify({ phone }),
});
// 登录接口
fetch('/api/login-by-code', {
  method: 'POST',
  body: JSON.stringify({ phone, code }),
});

3. 第三方登录（以 GitHub 为例）


  登录 GitHub

用户授权后跳转回本地地址，前端处理 code 并换取 token。

4. 单点登录（SSO）

使用统一认证中心（如 CAS、OAuth2 Server），所有子系统都通过 SSO 登录。

window.location.href = 'https://sso.example.com/login?redirect_uri=current_app_url';

5. OAuth2 登录（通用流程）

用户点击登录 → 跳转授权页面；
用户授权 → 回调本地 URL 获取 code；
前端将 code 发送给后端换取 access_token；
后端验证 token 并生成自定义 token 返回给前端；

6. JWT Token 登录

// 从本地存储（localStorage）中获取名为'token'的值，通常用于身份验证
const token = localStorage.getItem('token');
// 使用fetch API发起一个GET请求到'/api/user-info'端点
fetch('/api/user-info', {
  headers: {                          // 设置请求头，包含身份验证信息
    Authorization: `Bearer ${token}`, // 使用Bearer Token认证方案，将获取到的token附加到请求头中
  },
});

需配合 Axios 拦截器统一注入 token。

7. 免密登录（扫码登录）

前端请求生成二维码 ID；
用户用微信扫码 → 扫码后服务器记录绑定关系；
前端轮询是否扫码成功；
成功后返回 token 并登录。

8. 一键登录（运营商手机号）

使用运营商 SDK（如中国移动、联通、电信）提供的 API，获取用户手机号并自动登录。

const mobile = await getMobileFromCarrierSDK();
loginByPhone(mobile);

9. 自动登录（记住我）

if (localStorage.getItem('token')) {
  // 直接登录
}

🛠️ 三、不同技术栈的最佳实践

1. Vue 3（Composition API + Pinia）

登录组件：

// 导入Vue的ref函数，用于创建响应式变量
import { ref } from 'vue'
// 导入自定义的身份验证存储（Pinia store），用于管理用户认证状态
import { useAuthStore } from '@/stores/auth'
// 创建响应式变量username和password，初始值为空字符串
const username = ref('')
const password = ref('')
// 初始化身份验证存储实例
const authStore = useAuthStore()
// 定义异步函数login，用于处理用户登录逻辑
async function login() {
  // 使用fetch API发起POST请求到'/api/login'端点
  const res = await fetch('/api/login', {
    method: 'POST', // 指定请求方法为POST
    headers: {
      'Content-Type': 'application/json' // 设置请求头，声明发送的数据类型为JSON
    },
    body: JSON.stringify({ 
      username: username.value, // 将username响应式变量的值序列化为JSON
      password: password.value  // 将password响应式变量的值序列化为JSON
    }),
  })
  
  // 解析响应数据为JSON格式
  const data = await res.json()
  
  // 调用authStore的setToken方法，存储从响应中获取的token
  authStore.setToken(data.token)
  
  // 使用路由跳转到首页（假设router已导入并配置）
  router.push('/')
}

Store（Pinia）：

// 使用defineStore函数定义一个名为'auth'的Pinia store
export const useAuthStore = defineStore('auth', {
  // 定义store的state（状态），初始时token为null
  state: () => ({
    token: null,
  }),
  // 定义store的actions（操作），用于修改state或执行相关逻辑
  actions: {
    // 定义setToken操作，接收一个token参数
    setToken(token) {
      // 将传入的token赋值给store的token状态
      this.token = token
      // 将token存储到浏览器的localStorage中，键为'token'
      localStorage.setItem('token', token)
    },
    // 定义getToken操作，用于获取存储的token
    getToken() {
      // 从localStorage中获取键为'token'的值并返回
      return localStorage.getItem('token')
    }
  }
})

2. React（函数组件 + Redux）

登录组件：

// 定义一个名为Login的函数组件
function Login() {
  // 使用React的useState钩子定义状态变量username和setUsername，初始值为空字符串
  const [username, setUsername] = useState('')
  // 使用React的useState钩子定义状态变量password和setPassword，初始值为空字符串
  const [password, setPassword] = useState('')
  // 使用React-Redux的useDispatch钩子获取dispatch函数，用于触发Redux store中的action
  const dispatch = useDispatch()
  // 定义一个异步函数handleLogin，用于处理登录逻辑
  async function handleLogin() {
    // 使用fetch API发起POST请求到'/api/login'端点
    const res = await fetch('/api/login', {
      method: 'POST', // 指定请求方法为POST
      headers: {
        'Content-Type': 'application/json' // 设置请求头，声明发送的数据类型为JSON
      },
      body: JSON.stringify({ username, password }), // 将username和password状态序列化为JSON字符串作为请求体
    })
    
    // 解析响应数据为JSON格式
    const data = await res.json()
    
    // 使用dispatch函数触发一个action（假设setToken是一个已定义的action创建函数），将data.token传递给Redux store
    dispatch(setToken(data.token))
    
    // 使用navigate函数（假设来自react-router-dom）跳转到首页（'/'）
    navigate('/')
  }
  // 返回一个表单元素，当表单提交时调用handleLogin函数
  return (
    handleLogin}
      {/* 表单输入 */}
      {/* 这里可以添加用户名和密码的输入框，以及提交按钮 */}
    
  )
}

Redux Action：

// 导出一个名为setToken的箭头函数，接收一个token参数
export const setToken = (token) => ({
  // 返回一个action对象
  type: 'SET_TOKEN', // action的类型，通常用于标识action的用途
  payload: token,    // action的负载，这里是传入的token值
})

3. Angular（服务 + 路由守卫）

登录服务：

// 使用@Injectable装饰器，将该服务标记为可注入的，并指定其在根注入器中提供（'root'）
@Injectable({ providedIn: 'root' })
export class AuthService {
  // 定义一个私有属性tokenKey，用于存储token的键名
  private tokenKey = 'token';
  // 定义一个公共方法login，接收username和password作为参数
  login(username: string, password: string) {
    // 使用Angular的HttpClient发起POST请求到'/api/login'端点，传递username和password
    return this.http.post('/api/login', { username, password }).pipe(
      // 使用RxJS的tap操作符，在响应到达时执行副作用操作
      tap(res => 
        // 将响应中的token存储到浏览器的localStorage中，键为tokenKey
        localStorage.setItem(this.tokenKey, res.token)
      )
    );
  }
  // 定义一个公共方法getToken，用于获取存储的token
  getToken() {
    // 从localStorage中获取键为tokenKey的值并返回
    return localStorage.getItem(this.tokenKey);
  }
}

路由守卫：

// 使用@Injectable装饰器，将该守卫标记为可注入的，并指定其在根注入器中提供（'root'）
@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  // 构造函数，注入AuthService和Router服务
  constructor(
    private authService: AuthService, // 用于获取当前用户的token
    private router: Router           // 用于路由导航
  ) {}
  // 实现CanActivate接口的canActivate方法，返回一个布尔值
  canActivate(): boolean {
    // 检查AuthService中是否存在token
    if (this.authService.getToken()) {
      // 如果token存在，允许激活路由，返回true
      return true;
    } else {
      // 如果token不存在，导航到登录页面
      this.router.navigate(['/login']);
      // 阻止激活路由，返回false
      return false;
    }
  }
}

4. jQuery（原生 + AJAX）

// 使用jQuery选择器选中ID为'login-btn'的按钮，并为其绑定点击事件处理函数
$('#login-btn').click(function () {
  // 使用jQuery选择器选中ID为'username'的输入框，并获取其值
  const username = $('#username').val();
  // 使用jQuery选择器选中ID为'password'的输入框，并获取其值
  const password = $('#password').val();
  // 使用jQuery的$.ajax方法发起一个POST请求
  $.ajax({
    url: '/api/login', // 请求的URL
    method: 'POST',    // 请求方法为POST
    data: JSON.stringify({ username, password }), // 将用户名和密码序列化为JSON字符串作为请求体
    contentType: 'application/json', // 设置请求头，声明发送的数据类型为JSON
    success: function (res) { // 请求成功时的回调函数
      // 将响应中的token存储到浏览器的localStorage中，键为'token'
      localStorage.setItem('token', res.token);
      // 将页面重定向到首页（'/'）
      window.location.href = '/';
    }
  });
});

5. 原生 JavaScript

// 使用document.getElementById获取ID为'login-form'的表单元素，并为其绑定提交事件监听器
document.getElementById('login-form').addEventListener('submit', async function (e) {
  // 阻止表单的默认提交行为（防止页面刷新）
  e.preventDefault();
  // 使用FormData API获取表单数据
  const formData = new FormData(this);
  // 从表单数据中获取用户名和密码
  const username = formData.get('username');
  const password = formData.get('password');
  // 使用fetch API发起POST请求到'/api/login'端点
  const res = await fetch('/api/login', {
    method: 'POST', // 指定请求方法为POST
    body: JSON.stringify({ username, password }), // 将用户名和密码序列化为JSON字符串作为请求体
    headers: { 'Content-Type': 'application/json' }, // 设置请求头，声明发送的数据类型为JSON
  });
  // 解析响应数据为JSON格式
  const data = await res.json();
  // 将响应中的token存储到浏览器的localStorage中，键为'token'
  localStorage.setItem('token', data.token);
  // 将页面重定向到首页（'/'）
  window.location.href = '/';
});

📌 四、总结对比表

技术栈	是否推荐	登录实现方式	优点	缺点
Vue 3	✅ 推荐	Composition API + Pinia	状态管理清晰、易维护	初学有一定学习曲线
React	✅ 推荐	函数组件 + Redux	社区成熟、生态丰富	配置稍复杂
Angular	⚠️ 中大型项目适用	Service + Route Guard	结构规范、适合企业级	学习成本高
jQuery	❌ 不推荐新项目	原生 DOM + AJAX	上手快、兼容性强	可维护性差
原生 JS	✅ 小型项目可用	原生事件监听	无依赖、轻量	功能扩展难

📚 五、推荐登录模块设计结构（通用）

src/
├── components/
│   └── LoginForm.vue / Login.jsx
├── services/
│   └── auth.service.js
├── stores/
│   └── auth.store.js / auth.slice.js
├── utils/
│   └── token.utils.js
├── hooks/
│   └── useAuth.js
├── middleware/
│   └── auth.middleware.js
└── views/
    └── LoginPage.vue / Login.page.jsx

🧪 六、进阶学习方向

场景	推荐做法
登录埋点	登录成功后上报行为日志
登录性能优化	使用骨架屏、减少白屏时间
登录错误提示	统一拦截器处理错误信息
登录页 SEO	SPA 项目可使用 SSR 提升 SEO
登录页性能监控	引入 Sentry、Datadog 等工具

【前端登录】业务方式全解析：从传统到现代，涵盖 Vue、React、Angular、jQuery 与原生 JS 最佳实践

（图片来源网络，侵删）

免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们。

一	二	三	四	五	六	日
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

【前端登录】业务方式全解析：从传统到现代，涵盖 Vue、React、Angular、jQuery 与原生 JS 最佳实践

🧩 前端登录方式全解析：从传统到现代，涵盖 Vue、React、Angular、jQuery 与原生 JS 最佳实践

✅ 一、前端登录的常见方式汇总

🔐 二、不同登录方式的技术实现简述

1. 账号密码登录

2. 手机/邮箱验证码登录

3. 第三方登录（以 GitHub 为例）

4. 单点登录（SSO）

5. OAuth2 登录（通用流程）

6. JWT Token 登录

7. 免密登录（扫码登录）

8. 一键登录（运营商手机号）

9. 自动登录（记住我）

🛠️ 三、不同技术栈的最佳实践

1. Vue 3（Composition API + Pinia）

登录组件：

Store（Pinia）：

2. React（函数组件 + Redux）

登录组件：

Redux Action：

3. Angular（服务 + 路由守卫）

登录服务：

路由守卫：

4. jQuery（原生 + AJAX）

5. 原生 JavaScript

📌 四、总结对比表

📚 五、推荐登录模块设计结构（通用）

🧪 六、进阶学习方向

相关阅读

目录[+]