jv3-login-jwt/README.md

easy login from assign by route by cdnagroup using vuetify

# JV3LoginJwt: ปลั๊กอิน Vue 3 SSO อย่างง่าย

**JV3LoginJwt** เป็นปลั๊กอินสำหรับ Vue 3 ที่ช่วยให้คุณสามารถเพิ่มระบบล็อกอินแบบ Single Sign-On (SSO) ให้กับแอปพลิเคชันของคุณได้อย่างง่ายดาย โดยอาศัยกลไก JSON Web Token (JWT) ในการจัดการสถานะการล็อกอินของผู้ใช้

## คุณสมบัติหลัก

* **การผสานรวมที่ราบรื่น:** ออกแบบมาเพื่อทำงานร่วมกับ Vue Router อย่างลงตัว
* **รองรับ JWT:** ใช้มาตรฐานอุตสาหกรรมสำหรับการพิสูจน์ตัวตนและการให้สิทธิ์
* **การกำหนดค่าที่ยืดหยุ่น:** ปรับแต่ง URL การล็อกอิน, รีเฟรชโทเค็น, ข้อมูลผู้ใช้ และออกจากระบบได้
* **การจัดการโทเค็นอัตโนมัติ:** จัดการการจัดเก็บและรีเฟรชโทเค็น JWT โดยอัตโนมัติ
* **การจัดการสิทธิ์การเข้าถึง:** กำหนดค่าเส้นทางที่ต้องการการล็อกอินผ่าน `meta` ของ Route
* **ส่วนต่อประสานผู้ใช้ที่กำหนดเอง:** ปรับแต่งหน้าจอการล็อกอินและข้อความต้อนรับได้
* **การจัดการข้อผิดพลาด:** มีกลไกในการจัดการข้อผิดพลาดที่อาจเกิดขึ้น
* **การขยายความสามารถ:** รองรับการล็อกอินแบบกำหนดเองและ Callback หลังการล็อกอิน/ออกจากระบบ

## วิธีการใช้งานเบื้องต้น

1.  **ติดตั้งปลั๊กอิน:**
    ```bash
    npm install jv3-login-jwt
    # หรือ
    yarn add jv3-login-jwt
    ```

2.  **นำเข้าและใช้งานใน `main.ts`:**
    ```typescript
    import { createApp } from "vue";
    import { createRouter, createWebHistory } from "vue-router";
    import App from "./App.vue";
    import HomeView from "./views/HomeView.vue";
    // ... imports อื่นๆ
    import JV3LoginJwt from "./jv3-login-jwt";
    import vuetify from "./plugins/vuetify";
    import DefaultLayout from "./layouts/DefaultLayout.vue";

    // ... กำหนด routes และ router

    const authConfig = {
      authUrl: "/auth/token",
      refreshUrl: "/auth/refresh",
      userUrl: "/auth/me",
      logoutUrl: "/auth/logout",
      exceptions: [],
      jwtStorage: "jwt",
      authStorage: "jauth",
      defaultRoutePath: "/",
      defaultTokenExprie: 3600,
      tokenExprieBefore: 600,
      title: "Sigin",
      hello: "Hello นี้คือระบบล็อกอิน แบบง่าย",
      customRouteMeta: {
        noLayout: true,
      },
    };

    const app = createApp(App);
    app.use(vuetify);
    app.use(JV3LoginJwt, router, authConfig); // เพิ่มปลั๊กอิน JV3LoginJwt พร้อม router และ config
    app.use(router);

    router.isReady().then(() => {
      app.mount('#app');
    });
    ```

3.  **การใช้งานใน `jauth` ใน `component` ของ Route:**
    ```typescript
    <setup lang="ts" setup>
    ...
    const jauth = useAccount()
    const router = useRouter()

    function logout() {
        jauth.logout(); // ตัวอย่างการ Logout
    }

    // ตัวอย่างการ รับ user 
    const user = computed(()=>{
        return jauth.user
    })

    ...
    ```

## Interface ที่เกี่ยวข้อง

```typescript
import { Router, RouteRecordRaw } from "vue-router";

export interface IJAuthHeader {
  Authorization?: String;
  [key: string]: String | undefined;
}

export interface IJAuthUser {
  username: string;
  password: string;
  [key: string]: string;
}

export interface IJAuthConfig {
  url: string;
  path_login: string;
  path_refresh: string;
  path_user: string;
  customLogin?: Function;
  callbackLogin?: Function;
  customLogout?: Function;
  callbackLogout?: Function;
  exceptions?: Array<any>;
  jwtStorage: string;
  defaultTokenExprie?: number;
  tokenExprieBefore?: number;
  authStorage: string;
  defaultRoutePath?: string;
  handleError?: Function;
  title?: string;
  hello?: string;
  customRouteMeta?: object;
  loginRouterView?: RouteRecordRaw | undefined | null | any;
}