DEV Community

zhonghua
zhonghua

Posted on • Edited on

The Secret to Developing HarmonyOS: Creating an Elegant Login Status Management System

The Secret to Developing HarmonyOS: Creating an Elegant Login Status Management System

I. Foreword
During the development process of HarmonyOS, as the scale of the application grows, login status management gradually becomes a challenge in system design. A clear and efficient login status management system can not only simplify the development process but also enhance the user experience. This article will share an elegant login status management design scheme to help developers easily deal with login status control in complex systems.

II. Authentication Events and Authentication Code Design
Authentication events are the core of global application events, triggering login or logout operations and can be broadcast throughout the project. We have defined three basic authentication events: app start, login, and logout.

Authentication event code example:

export class AuthenticationEvent {
  static readonly AppStart = "$AppStart$";
  static readonly LogIn = "$LogIn$";
  static readonly LogOut = "$LogOut$";
}
Enter fullscreen mode Exit fullscreen mode

III. Authentication Status
User authentication status is key for the system to determine whether a user is logged in. We have defined two states: authenticated and unauthenticated.

Authentication status code example:

export const AUTHENTICATION_STATE:string = "$AuthenticationState$"

// Authentication state
export class AuthenticationState {}

// - authenticated - Authentication successful
export class AuthenticationAuthenticated extends AuthenticationState {}

// - unauthenticated - Not authenticated
export class AuthenticationUnauthenticated extends AuthenticationState {}
Enter fullscreen mode Exit fullscreen mode

IV. Authentication Interface Template
The authentication interface is the specific implementation of login status management, including token checking, saving, and deletion, as well as page redirection when authenticated and unauthenticated.

Authentication interface code example:

const TOKEN = "token";

export abstract class IUserAuthentication {
  libPreferencesSync: LibPreferencesSync;

  hasToken(): boolean {
    return this.libPreferencesSync.getValue(TOKEN).toString().length > 0;
  }

  saveToken(token: string) {
    this.libPreferencesSync.saveKeyValue(TOKEN, token);
  }

  deleteToken() {
    this.libPreferencesSync.deleteData(TOKEN);
  }

  abstract authPage(): void;
  abstract unAuthPage(): void;
}
Enter fullscreen mode Exit fullscreen mode

V. Pages for Managing Login Status
Through the event hub, we can notify the global status throughout the application. The login status manager changes the authentication status based on the events sent by the user.

Login status manager code example:

export class Authentication {
  // Private static variable to save the singleton object
  private static _instance :Authentication;

  // Private constructor to prevent direct instantiation from outside
  private constructor() {
    // Constructor content
  }

  // Static method to get the singleton object
  public static getInstance() {
    if (!Authentication._instance) {
      Authentication._instance = new Authentication();
    }
    return Authentication._instance;
  }

  startApp(){
    Application.getInstance().applicationContext.eventHub.emit(AuthenticationEvent.AppStart)
  }

  logIn(token:string){
    Application.getInstance().applicationContext.eventHub.emit(AuthenticationEvent.LogIn,token)
  }

  logOut(){
    Application.getInstance().applicationContext.eventHub.emit(AuthenticationEvent.LogOut)
  }

  init(iuserAuthentciation : IUserAuthentication){
    Application.getInstance().applicationContext.eventHub.on(AuthenticationEvent.AppStart,()=>{
      if(iuserAuthentciation.hasToken()){
        AppStorage.setOrCreate(AUTHENTICATION_STATE,new AuthenticationAuthenticated())
        iuserAuthentciation.authPage();
      }else{
        AppStorage.setOrCreate(AUTHENTICATION_STATE,new AuthenticationUnauthenticated())
        iuserAuthentciation.unAuthPage();
      }
    })
    Application.getInstance().applicationContext.eventHub.on(AuthenticationEvent.LogIn,(token:string)=>{
      iuserAuthentciation.saveToken(token)
      AppStorage.set(AUTHENTICATION_STATE,new AuthenticationAuthenticated())
      iuserAuthentciation.authPage();
    })
    Application.getInstance().applicationContext.eventHub.on(AuthenticationEvent.LogOut,()=>{
      iuserAuthentciation.deleteToken()
      AppStorage.set(AUTHENTICATION_STATE,new AuthenticationUnauthenticated())
      iuserAuthentciation.unAuthPage();
    })
  }
}
Enter fullscreen mode Exit fullscreen mode

VI. Usage in Projects
In projects, we initialize the login status manager and change the page style or behavior based on the authentication status in the pages.

Project usage code example:

class Auth extends IUserAuthentication {
  // ... Implement specific login and non-login page redirection logic
}

// Initialization
Authentication.getInstance().init(new Auth());

// Usage in pages
aboutToAppear(): void {
  this.authentication();
}

authentication() {
  if (this.authetication instanceof AuthenticationAuthenticated) {
    // Get user data
  } else if (this.authetication instanceof AuthenticationUnauthenticated) {
    // Delete user data
  }
}
Enter fullscreen mode Exit fullscreen mode

VII. Summary
Through the sharing in this article, we have learned how to design and implement an elegant login status management system in HarmonyOS. From the design of authentication events to the management of authentication status and the specific implementation of the authentication interface, each step is aimed at simplifying the development process and improving the robustness and maintainability of the system. It is hoped that this article can provide practical references and inspiration for HarmonyOS developers.

Top comments (0)