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

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

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

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

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

1. ติดตั้งปลั๊กอิน:

   npm install jv3-login-jwt
   # หรือ
   yarn add jv3-login-jwt

2. นำเข้าและใช้งานใน main.ts:

   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:

   <setup lang="ts" setup>
   ...
   const jauth = useAccount()
   const router = useRouter()
   
   function logout() {
       jauth.logout(); // ตัวอย่างการ Logout
   }
   
   // ตัวอย่างการ รับ user 
   const user = computed(()=>{
       return jauth.user
   })
   
   ...

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

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;
  rolePath?: string;
  permissionPath?: string;
  userPath?: string;
  authStorage: string;
  defaultRoutePath?: string;
  handleError?: Function;
  title?: string;
  hello?: string;
  customRouteMeta?: object;
  loginRouterView?: RouteRecordRaw | undefined | null | any;
}

// generate table of configuration options

| Option Name | Type | Default Value | Description | |-------------|------|----------------|-------------| | url | string | '' | Base URL for authentication API. | | path_login | string | '/auth/token' | Endpoint for login requests. | | path_refresh | string | '/auth/refresh' | Endpoint for refreshing JWT tokens. | | path_user | string | '/auth/me' | Endpoint for fetching user information. | | jwtStorage | string | 'jwt' | Key for storing JWT token in localStorage. | | authStorage | string | 'jauth' | Key for storing authentication data in localStorage. | | defaultTokenExprie | number | 3600 | Default token expiration time in seconds. | | tokenExprieBefore | number | 600 | Time in seconds before token expiration to trigger a refresh. | | rolePath | string | 'roles' | Path to access user roles in the user object. | | permissionPath | string | 'permissions' | Path to access user permissions in the user object. | | userPath | string | '' | Path to access user information in the user object. | | defaultRoutePath | string | '/' | Default route path after successful login. | | title | string | 'Sigin' | Title for the login view. | | hello | string | 'Hello นี้คือระบบล็อกอิน แบบง่าย' | Welcome message for the login view. | | customRouteMeta | object | {} | Custom meta data to be added to the login route. | | loginRouterView | RouteRecordRaw | undefined | null | any | null | Custom route view component for the login page. |

CHANGELOG

See CHANGELOG.md for more information.