DOCSEARCHbyAlgolia
Submit Docs

Sangyu Knowledge Base

website·Indexed 29 days ago

https://sangyu.asia/

A collection of technical notes and guides covering frontend development (Vue 3, React, TypeScript, Vite, CSS/SCSS/Less), JavaScript fundamentals (closures, event loop, prototypes, Promises), backend concepts (Redis distributed locks, JWT authentication, RBAC), and computer science basics (TCP/UDP, Dynamic Programming).

Tokens
37K
Snippets
186
Records
248
Agent score
49%

What's inside Sangyu Docs

  2. Overview of Vue 3 Framework

    Vue 3 is a progressive JavaScript framework used for building user interfaces. It utilizes reactive data binding and component-based development to enable developers to build modern web applications with greater efficiency and flexibility.

  3. Understand Monorepo vs Multirepo architecture

    A Monorepo (monolithic repository) is a strategy where multiple projects are managed within a single version control repository. In contrast, a Multirepo approach assigns each project to its own independent repository.

    Key differences:

    • Multirepo: Each project (e.g., frontend, backend, tools) has its own repository.
    • Monorepo: All projects, including applications, shared libraries, and tools, reside in one repository.

  4. Understand JavaScript this binding basics

    In JavaScript, this is a runtime object reference bound when a function is executed. Unlike variables, this is not fixed at the time of function declaration but is determined by how the function is called. Its primary purpose is to allow the same function to access different context objects depending on the invocation scenario.

  5. Understand JavaScript Promise fundamentals

    A Promise is an object representing the eventual completion (or failure) of an asynchronous operation. It encapsulates the success or failure result of an asynchronous task and its corresponding handling logic, allowing asynchronous flows to be written as chains and supporting unified error handling. It primarily solves the problems of 'callback hell', fragmented error handling, and the difficulty of combining multiple asynchronous tasks.

  6. Understand the nature of `this` in JavaScript

    this is not fixed when a function is defined; instead, it is a reference to a context object bound at the time the function is executed. For regular functions, the value of this depends on how the function is called. For arrow functions, there is no own this binding; they inherit this from the enclosing lexical scope at the time of definition.

  7. Best practices for state synchronization in React

    To maintain a healthy React architecture while simulating two-way binding, follow these constraints:

    1. Avoid direct mutation: Never let child components mutate parent state objects directly; always use callbacks.
    2. Single Source of Truth: Ensure the parent component remains the owner of the state.
    3. Avoid useEffect loops: Be cautious when using useEffect to sync two different states (A -> B and B -> A), as this can cause infinite render loops.
    4. Scale with Libraries: For complex global state, prefer libraries like Zustand, Redux, or Jotai over deep Context nesting.

  9. JWT and Redis Authentication Workflow

    The authentication architecture follows these steps:

    Login Flow:

    1. User submits credentials via POST /api/short-link/v1/user/login.
    2. System validates credentials against the database.
    3. System checks Redis for existing session (short-link:user:login:{username}).
    4. JwtUtil.generateToken creates a signed JWT.
    5. User info is stored in Redis with a TTL (e.g., 1800s).
    6. Token is returned to the client.

    Request Verification Flow:

    1. Client sends request with Token and username.
    2. JwtUtil.validateToken checks the signature, expiration, and username match.
    3. System checks Redis for the existence of the session key.
    4. If both are valid, the request is authorized.

  10. Understand JavaScript Primitive and Object Data Types

    JavaScript values are categorized into two main types: Primitive types and Object types.

    Primitive Types (7 total):

    • number, string, boolean, undefined, null, symbol, bigint.

    Object Types:

    • Plain objects {}
    • Arrays []
    • Functions function(){}
    • Dates new Date()
    • Regular Expressions /a/
    • Map and Set.

  11. Understand JavaScript Promise basics and states

    A Promise is an object representing the eventual completion (or failure) of an asynchronous operation. It acts as a wrapper for a value that will be available in the future.

    Promises exist in one of three mutually exclusive states:

    • pending: Initial state, neither fulfilled nor rejected.
    • fulfilled: The operation completed successfully.
    • rejected: The operation failed.

    Crucially, a Promise's state is immutable once it changes; it can transition from pending to either fulfilled or rejected, but cannot change again once a final state is reached.

  12. Implement JWT Access and Refresh Token mechanism

    The system uses a dual-token architecture to balance security and user experience. Access Tokens provide short-term access (30 minutes), while Refresh Tokens allow users to obtain new Access Tokens without re-authenticating for a longer period (7 days).

    Key Logic:

    • Token Differentiation: The JwtUtil uses a TokenType enum and includes a tokenType claim in the payload to distinguish between access and refresh tokens.
    • Server-side Control: Refresh tokens are stored in Redis (USER_REFRESH_TOKEN_KEY:{username}) to allow the server to force-invalidate sessions.
    • Validation: Restricted API endpoints only accept Access Tokens; Refresh Tokens cannot be used to access protected resources directly.