Auth Domain

点击查看【processon】

Detect Login Status

It is recommended developing in a top-down approach, so we start with the app layer.
App layer should be the translator of the user case map, perhaps you chould face it when developing, any way, I also call this archtecture as “User Case Oriented Programming”.
TDD is also recommended, I use vitest this project.

export default async function detectLoginStatus() {
}
if (import.meta.vitest) {
  const { describe, it, vi, afterEach, expect } = import.meta.vitest
  vi.mock('auth/adts/router')
  vi.mock('auth/adts/local_storge')
  vi.mock('auth/adts/api')
  const setCurrentUser = vi.spyOn(store, 'currentUser', 'set')
  describe('detectLoginStatus', () => {
    afterEach(() => {
      vi.resetAllMocks()
    })
    it('should redirect to login page if token is null', async () => {
      ;(localStorage.getToken as Mock).mockReturnValue(null)
      await detectLoginStatus()
      expect(router.goToLogin).toBeCalled()
    })
    it('should redirect to login page if token is expired', async () => {
      ;(localStorage.getToken as Mock).mockReturnValue('token')
      ;(api.detectLoginStatus as Mock).mockReturnValue(false)
      await detectLoginStatus()
      expect(api.detectLoginStatus).toBeCalledWith('token')
      expect(router.goToLogin).toBeCalled()
    })
    it('should set the current user and redirect to home page if token is avilable', async () => {
      ;(localStorage.getToken as Mock).mockReturnValue('token')
      ;(api.detectLoginStatus as Mock).mockReturnValue({ user: 'tom' })
      await detectLoginStatus()
      expect(api.detectLoginStatus).toBeCalledWith('token')
      expect(setCurrentUser).toBeCalledWith({ user: 'tom' })
      expect(router.goToHome).toBeCalled()
    })
  })
}

Ports

Adapter pattern consists ports and implementers, it is responsable for isolate the technolgy form the domain logics. in well designed project, you cannot see which technolgies are used, even connot see it is a forentend or backend project. The core part of a project can always be assumed just run in internal storage.

export interface API {
  detectLoginStatus(token: string): Promise<boolean | User>
  login(
    userName: string,
    password: string,
  ): Promise<{ token: string; user: User }>
}
export interface Router {
  goToHome(): void
  goToLogin(): void
}
export interface LocalStorege {
  setToken(token: string): void
  getToken(): string | null
}
export interface Store {
  currentUser?: User
}

Adapters

Adapters are implementer of the ports in app layer, most the them are for side effects, such as api, frontend reactively store, router, forented events,and so on. As they isolate the real implemention, you can always replace one of them whitout any effects to the apps layer and modles layer.

import { API } from 'auth/apps/ports'
const user: User = { id: 1, name: 'Tom', role: 'user' }
export const detectLoginStatus: API['detectLoginStatus'] = async (
  token: string,
) => {
  return user
}
export const login: API['login'] = async (
  username: string,
  password: string,
) => {
  return {
    token: 'token',
    user,
  }
}

Router

import { Router } from 'auth/apps/ports'
export const goToHome: Router['goToHome'] = () => {
  if (location.pathname !== '/') location.pathname = '/'
}
export const goToLogin: Router['goToLogin'] = () => {
  if (location.pathname !== '/login') location.pathname = '/login'
}

Local Storage

import { LocalStorege } from 'auth/apps/ports'
export const setToken: LocalStorege['setToken'] = (token: string) => {
  localStorage.setItem('token', token)
}
export const getToken: LocalStorege['getToken'] = () => {
  return localStorage.getItem('token')
}

Store

import { proxy } from 'valtio'
import { Store } from 'auth/apps/ports'
export default proxy<Store>({
  currentUser: undefined,
})

Models

export interface User {
  id: ID
  name: string
  role: 'user' | 'admin'
}

This is the place you develop bussiness logic, bussiness are stable, rarely be modified after finished.
There is only an interface defination now. In most apps, bussiness logics are always in backend, so this layer will be very light in forentend. well in some specifc apps ,such as a drawing program, text editor, this layer well be very heavy.

App

at last, these is all codes for “detect login status” user case:

import { Mock } from 'vitest'
import * as router from 'auth/adts/router'
import * as localStorage from 'auth/adts/local_storge'
import * as api from 'auth/adts/api'
import store from 'auth/adts/store'
export async function detectLoginStatus() {
  const token = localStorage.getToken()
  if (!token) return router.goToLogin()
  const res = await api.detectLoginStatus(token)
  if (!res) return router.goToLogin()
  const user = res as User
  store.currentUser = user
  router.goToHome()
}
if (import.meta.vitest) {
  const { describe, it, vi, afterEach, expect } = import.meta.vitest
  vi.mock('auth/adts/router')
  vi.mock('auth/adts/local_storge')
  vi.mock('auth/adts/api')
  const setCurrentUser = vi.spyOn(store, 'currentUser', 'set')
  describe('detectLoginStatus', () => {
    afterEach(() => {
      vi.resetAllMocks()
    })
    it('should redirect to login page if token is null', async () => {
      ;(localStorage.getToken as Mock).mockReturnValue(null)
      await detectLoginStatus()
      expect(router.goToLogin).toBeCalled()
    })
    it('should redirect to login page if token is expired', async () => {
      ;(localStorage.getToken as Mock).mockReturnValue('token')
      ;(api.detectLoginStatus as Mock).mockReturnValue(false)
      await detectLoginStatus()
      expect(api.detectLoginStatus).toBeCalledWith('token')
      expect(router.goToLogin).toBeCalled()
    })
    it('should set the current user and redirect to home page if token is avilable', async () => {
      ;(localStorage.getToken as Mock).mockReturnValue('token')
      ;(api.detectLoginStatus as Mock).mockReturnValue({ user: 'tom' })
      await detectLoginStatus()
      expect(api.detectLoginStatus).toBeCalledWith('token')
      expect(setCurrentUser).toBeCalledWith({ user: 'tom' })
      expect(router.goToHome).toBeCalled()
    })
  })
}

There is an very import conecpt in this layer: codes should express the bussineess.
How to express a “detect login status” user case in english ? I think it may be “Check is there a token, if token is null ,go to login page; If token is exsit, check if the token is expired or not by call a backend api, if token is expired , got to login to; If token is available ,set the current user and go to home page”.
And now look at the codes in detectLoginStauts, you will see that translate codes meaning to human language, it can be as the product documentation. This is what the “Code As Product” mean, the codes of this layer must be understandable to domain experts or product manager.
This is also mean: the codes of an user case should be the express of the sequence diagram of that user case. Perhaps you should face a sequence diagram when you develop an user case.

UI

import { useState, FormEvent } from 'react'
import login from 'auth/apps/login'
export default function LoginForm() {
  const [password, setPassword] = useState<string>('')
  return (
    <div>
      <input type="text" value="tom" readOnly disabled />
      <input
        type="password"
        placeholder="anything"
        value={password}
        onInput={(e: FormEvent<HTMLInputElement>) =>
          setPassword(e.currentTarget.value)
        }
      />
      <button onClick={() => login('tom', password)}>login</button>
    </div>
  )
}

Ui is very simple, it shouldn’t have any bussiness logic, just consumes the app functions and store data.