前端统一身份认证与源码实现解析

小明：最近在做前端项目，发现用户登录和权限管理有点麻烦，有没有什么好的方法？

小李：你可以考虑使用“统一身份认证”系统，这样可以集中管理用户信息，避免重复开发。

小明：那具体怎么实现呢？有没有现成的源码可以参考？

小李：我们可以用OAuth2来实现。下面是一个简单的前端代码示例，使用JavaScript进行登录请求：

// 前端登录请求示例
function login() {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;

  fetch('/api/auth/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username, password })
  })
  .then(response => response.json())
  .then(data => {
    if (data.token) {
      localStorage.setItem('token', data.token);
      alert('登录成功！');
    } else {
      alert('登录失败：' + data.message);
    }
  });
}
    

小明：这个代码是前端部分吗？是不是需要后端配合？

小李：没错，前端负责发送请求，后端处理验证并返回token。你可以在前端保存token，用于后续的API调用。

小明：明白了，这样就能实现统一的身份认证了。

小李：对，而且这种方式也便于后续扩展，比如集成第三方登录。