前端登录态管理神器：单例模式的实践与应用

码上花甲
361 阅读5分钟

阅读时间约 8 分钟。

在《闭包私有化变量：实现安全高效的单例模式》一文中，我们介绍了闭包在单利模式中的应用，阅读过的小伙伴应该对单例模式有了一个基本的认识。接下来，我们会继续介绍单例模式在前端开发中的应用。

身为一名前端开发者，我们都知道在实际开发过程中，管理登录态是一个非常重要的环节。正确处理登录态对于用户体验、系统安全性等方面都有着重要的影响。今天，我们就来探讨一下在前端开发中如何通过单例模式来高效地管理登录态。

1. 登录态管理的挑战

在前端开发中，我们常常需要处理登录态，包括：

  1. 存储和获取用户登录信息
  2. 登录和注销操作
  3. 验证用户权限
  4. 在前端路由、接口请求等场景中判断登录状态

在处理这些问题时，我们要关注以下信息：

  1. 全局共享的登录信息需要避免污染
  2. 登录态管理应易于维护和扩展
  3. 避免不必要的重复登录请求

那么，如何解决这些问题呢？接下来，我们将介绍如何通过单例模式来解决这些挑战。

2. 单例模式在登录态管理中的应用

单例模式是一种创建型设计模式，它保证一个类仅有一个实例，并提供一个全局访问点。在登录态管理中，我们可以利用单例模式来创建一个全局唯一的登录管理器。

接下来，我们将使用单例模式来实现一个简单的登录管理器：

class LoginManager {
  private static instance: LoginManager;
  private loginState: boolean = false;
  private userInfo: any = null;

  private constructor() {
    if (LoginManager.instance) {
      return LoginManager.instance;
    }
    LoginManager.instance = this;
  }

  public static getInstance(): LoginManager {
    return LoginManager.instance ?? new LoginManager();
  }

  public login(username: string, password: string): void {
    // 调用登录接口并更新登录态
  }

  public logout(): void {
    // 调用注销接口并清空登录信息
  }

  public isAuthenticated(): boolean {
    // 判断是否登录
    return this.loginState;
  }

  public getUserInfo(): any {
    // 获取登录用户信息
    return this.userInfo;
  }
}

const loginManager = LoginManager.getInstance();
const loginManager2 = LoginManager.getInstance();

console.log(loginManager === loginManager2); // 输出 true，说明只创建了一个实例

在上面的代码中，我们首先定义了一个名为 LoginManager 的类。在这个类的构造函数中，我们检查 LoginManager.instance 是否已存在。如果已存在，直接返回这个实例；否则，初始化登录信息并设置 LoginManager.instance 为当前实例。这样，我们可以保证在整个应用中只有一个 LoginManager 实例，避免了登录信息的冗余和混乱。

3. 单例模式优势

通过使用单例模式来管理登录态，我们可以获得如下优势：

  1. 简化登录信息的全局共享，避免污染全局变量
  2. 减少重复登录请求，节省资源
  3. 便于维护和扩展登录态管理功能，提高代码可读性和可维护性

4. 实际应用案例

现在，我们以一个简单的前端应用为例，来看看如何利用单例模式的登录管理器实现登录态管理。

4.1 登录操作

下面我们定义了一个名为 handleLogin 的异步函数，该函数接受两个参数 username 和 password，分别表示用户的用户名和密码。函数体中通过调用 loginManager 对象的 login 方法进行登录操作，如果登录成功则跳转至主页面，否则在 catch 语句块中处理错误信息。

async function handleLogin(username: string, password: string): Promise<void> {
  try {
    await loginManager.login(username, password);
    // 登录成功，跳转至主页面
  } catch (error) {
    // 登录失败，显示错误信息
  }
}

4.2 注销操作

这里我们定义一个名为 handleLogout 的函数，其作用是调用 loginManager 对象的 logout 方法来注销登录，然后跳转至登录页面。

在注销登录的过程中，需要调用一些注销接口来清除登录状态和登录用户信息等。在代码中，我们使用 loginManager 对象来封装这些接口，使得注销操作可以方便地进行。

之后，再根据具体的业务需求来进行页面跳转等后续操作。

function handleLogout() {
  loginManager.logout();
  // 注销成功，跳转至登录页面
}

4.3 前端路由守卫

下面的 checkAuthor 函数，用于检查用户是否已经登录，如果未登录则跳转至登录页面，否则继续执行后续操作。函数内部是通过调用 loginManager 对象的 isAuthenticated 方法来判断用户是否已登录的，可以根据具体的业务需求在 if/else 语句块中进行页面跳转或其他操作。

function checkAuth() {
  if (!loginManager.isAuthenticated()) {
    // 需要鉴权且未登录，跳转至登录页面
  } else {
    // 其他情况，继续执行
  }
}

4.4 获取用户信息

getUserInfo 函数内部调用了 loginManager 对象的 getUserInfo 方法，该方法用来获取登录用户的信息。

当获取到登录用户的信息后，可根据具体的业务需求来展示相关的用户数据，比如用户的名称、头像等。

function getUserInfo() {
  const userInfo = loginManager.getUserInfo();
  // 展示用户信息
}

通过上述实例，我们可以看到使用单例模式的登录管理器可以让我们更方便地管理登录态，提高代码的可维护性。

5. 总结

在前端开发中，登录态管理是一个至关重要的环节。通过使用单例模式，我们可以有效地解决全局共享登录信息、避免重复登录请求以及便于维护和扩展的问题。希望本文能对你在前端开发过程中管理登录态有所帮助。

如果你觉得本文对你有帮助，请点赞、分享给更多的朋友，也欢迎关注我们的微信公众号【码上花甲】，获取更多前端开发干货和资源。

感谢阅读，我们下期再见！

avatar
文章
阅读
粉丝