feature:更新登录插件库

2025-07-07 11:09:44 +08:00 · 2025-07-07 11:09:44 +08:00 · 2427b5e213
commit 2427b5e213
parent d8ec93536b
7 changed files with 141 additions and 69 deletions
--- a/.env
+++ b/.env
@ -1 +1,3 @@
-VITE_API_BASE_URL=http://47.94.224.191:8080
+VITE_API_BASE_URL=http://47.94.224.191:8080
+
+VITE_FRONT_DEVELOP=http://localhost:5173
--- a/package.json
+++ b/package.json
@ -9,7 +9,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "@auth0/auth0-vue": "^2.4.0",
+    "@logto/vue": "^3.0.9",
    "axios": "^1.7.2",
    "echarts": "^5.6.0",
    "ftp-deploy": "^2.4.7",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -8,9 +8,9 @@ importers:

  .:
    dependencies:
-      '@auth0/auth0-vue':
-        specifier: ^2.4.0
-        version: 2.4.0(typescript@5.8.3)(vue-router@4.5.1(vue@3.5.17(typescript@5.8.3)))
+      '@logto/vue':
+        specifier: ^3.0.9
+        version: 3.0.9(vue@3.5.17(typescript@5.8.3))
      axios:
        specifier: ^1.7.2
        version: 1.10.0
@ -88,17 +88,6 @@ packages:
  '@antfu/utils@0.7.10':
    resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==}

-  '@auth0/auth0-spa-js@2.2.0':
-    resolution: {integrity: sha512-YaHHCxiSQxDb+Ju9gXOqcqgXWq8EkUSpZC4g24D3MoEBUaADKwOosrAnmjDZcslBZpnSFFdrl4dLYedAer3xlQ==}
-
-  '@auth0/auth0-vue@2.4.0':
-    resolution: {integrity: sha512-12iLvojP8Pvxqu2Abxzksp0HqlSovGiAUhWrppnOaJP02MZEBQo+c/IwM6VbM0edNk+eqqjX5u96iw5peaCPSg==}
-    peerDependencies:
-      vue-router: ^4.0.12
-    peerDependenciesMeta:
-      vue-router:
-        optional: true
-
  '@babel/code-frame@7.27.1':
    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
    engines: {node: '>=6.9.0'}
@ -348,6 +337,20 @@ packages:
  '@juggle/resize-observer@3.4.0':
    resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}

+  '@logto/browser@3.0.9':
+    resolution: {integrity: sha512-hPCmDj+Anb0ZdCaCZUFt7R5aLmuZcu7fN9LN0zFE32tE8hynmGatNS8eMFJN85fM13eTKunSicT9+5KMS8DGjQ==}
+
+  '@logto/client@3.1.4':
+    resolution: {integrity: sha512-aaz1XrLLTBii5lz3c7oHr/kqcR2iTbTehxlCn3YMnSyGUBVjoUYH4eU37wqf08nEYjtsLaSndYu63WVN8/Fpqw==}
+
+  '@logto/js@6.1.0':
+    resolution: {integrity: sha512-FGFDtqZqVP0mUR7ze7Uz488TsMSWQkMiU00PefJg/MMQJeI93WejPcpPkGd4JvoKAVj99wfsY/0AR1gMADCLyQ==}
+
+  '@logto/vue@3.0.9':
+    resolution: {integrity: sha512-wG4/r2xcLsvVYZm5Ajj4PtOv9xz4GnlSkrdLLV4dsnVbVNHitJaoNH7YWrKu96HMDIozkHsPxlOhdmg2DIkVog==}
+    peerDependencies:
+      vue: ^3.0.0
+
  '@nodelib/fs.scandir@2.1.5':
    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
    engines: {node: '>= 8'}
@ -469,6 +472,10 @@ packages:
    cpu: [x64]
    os: [win32]

+  '@silverhand/essentials@2.9.2':
+    resolution: {integrity: sha512-bD+82D9Dfa1F5xX1kfdR5ODIoJS41NOxTuHx4shVS5A4/ayEG+ZplpDDjB19fsa7kZXgSgD75R4sUCXjm88x6w==}
+    engines: {node: ^18.12.0 || ^20.9.0 || ^22.0.0, pnpm: ^9.0.0}
+
  '@trysound/sax@0.2.0':
    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
    engines: {node: '>=10.13.0'}
@ -722,6 +729,14 @@ packages:
    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
    engines: {node: '>= 0.4'}

+  camelcase-keys@9.1.3:
+    resolution: {integrity: sha512-Rircqi9ch8AnZscQcsA1C47NFdaO3wukpmIRzYcDOrmvgt78hM/sj5pZhZNec2NM12uk5vTwRHZ4anGcrC4ZTg==}
+    engines: {node: '>=16'}
+
+  camelcase@8.0.0:
+    resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==}
+    engines: {node: '>=16'}
+
  caniuse-lite@1.0.30001726:
    resolution: {integrity: sha512-VQAUIUzBiZ/UnlM28fSp2CRF3ivUn1BWEvxMcVTNwpw91Py1pGbPIyIKtd+tzct9C3ouceCVdGAXxZOpZAsgdw==}

@ -1336,9 +1351,15 @@ packages:
    resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
    engines: {node: '>=0.10.0'}

+  jose@5.10.0:
+    resolution: {integrity: sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg==}
+
  js-base64@2.6.4:
    resolution: {integrity: sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==}

+  js-base64@3.7.7:
+    resolution: {integrity: sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==}
+
  js-cookie@3.0.5:
    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
    engines: {node: '>=14'}
@ -1410,6 +1431,10 @@ packages:
    resolution: {integrity: sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==}
    engines: {node: '>=0.10.0'}

+  map-obj@5.0.0:
+    resolution: {integrity: sha512-2L3MIgJynYrZ3TYMriLDLWocz15okFakV6J12HXvMXDHui2x/zgChzg1u9mFFGbbGWE+GsLpQByt4POb9Or+uA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
  map-visit@1.0.0:
    resolution: {integrity: sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==}
    engines: {node: '>=0.10.0'}
@ -1649,6 +1674,10 @@ packages:
  queue-microtask@1.2.3:
    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}

+  quick-lru@6.1.2:
+    resolution: {integrity: sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ==}
+    engines: {node: '>=12'}
+
  read@2.1.0:
    resolution: {integrity: sha512-bvxi1QLJHcaywCAEsAk4DG3nVoqiY2Csps3qzWalhj5hFqRn1d/OixkFXtLO1PrgHUcAP0FNaSY/5GYNfENFFQ==}
    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@ -1927,6 +1956,10 @@ packages:
  tweetnacl@0.14.5:
    resolution: {integrity: sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==}

+  type-fest@4.41.0:
+    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
+    engines: {node: '>=16'}
+
  typed-array-buffer@1.0.3:
    resolution: {integrity: sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==}
    engines: {node: '>= 0.4'}
@ -2142,17 +2175,6 @@ snapshots:

  '@antfu/utils@0.7.10': {}

-  '@auth0/auth0-spa-js@2.2.0': {}
-
-  '@auth0/auth0-vue@2.4.0(typescript@5.8.3)(vue-router@4.5.1(vue@3.5.17(typescript@5.8.3)))':
-    dependencies:
-      '@auth0/auth0-spa-js': 2.2.0
-      vue: 3.5.17(typescript@5.8.3)
-    optionalDependencies:
-      vue-router: 4.5.1(vue@3.5.17(typescript@5.8.3))
-    transitivePeerDependencies:
-      - typescript
-
  '@babel/code-frame@7.27.1':
    dependencies:
      '@babel/helper-validator-identifier': 7.27.1
@ -2361,6 +2383,30 @@ snapshots:

  '@juggle/resize-observer@3.4.0': {}

+  '@logto/browser@3.0.9':
+    dependencies:
+      '@logto/client': 3.1.4
+      '@silverhand/essentials': 2.9.2
+      js-base64: 3.7.7
+
+  '@logto/client@3.1.4':
+    dependencies:
+      '@logto/js': 6.1.0
+      '@silverhand/essentials': 2.9.2
+      camelcase-keys: 9.1.3
+      jose: 5.10.0
+
+  '@logto/js@6.1.0':
+    dependencies:
+      '@silverhand/essentials': 2.9.2
+      camelcase-keys: 9.1.3
+
+  '@logto/vue@3.0.9(vue@3.5.17(typescript@5.8.3))':
+    dependencies:
+      '@logto/browser': 3.0.9
+      '@silverhand/essentials': 2.9.2
+      vue: 3.5.17(typescript@5.8.3)
+
  '@nodelib/fs.scandir@2.1.5':
    dependencies:
      '@nodelib/fs.stat': 2.0.5
@ -2441,6 +2487,8 @@ snapshots:
  '@rollup/rollup-win32-x64-msvc@4.44.1':
    optional: true

+  '@silverhand/essentials@2.9.2': {}
+
  '@trysound/sax@0.2.0': {}

  '@types/estree@1.0.8': {}
@ -2762,6 +2810,15 @@ snapshots:
      call-bind-apply-helpers: 1.0.2
      get-intrinsic: 1.3.0

+  camelcase-keys@9.1.3:
+    dependencies:
+      camelcase: 8.0.0
+      map-obj: 5.0.0
+      quick-lru: 6.1.2
+      type-fest: 4.41.0
+
+  camelcase@8.0.0: {}
+
  caniuse-lite@1.0.30001726: {}

  chalk@1.1.3:
@ -3483,8 +3540,12 @@ snapshots:

  isobject@3.0.1: {}

+  jose@5.10.0: {}
+
  js-base64@2.6.4: {}

+  js-base64@3.7.7: {}
+
  js-cookie@3.0.5: {}

  js-tokens@4.0.0: {}
@ -3548,6 +3609,8 @@ snapshots:

  map-cache@0.2.2: {}

+  map-obj@5.0.0: {}
+
  map-visit@1.0.0:
    dependencies:
      object-visit: 1.0.1
@ -3820,6 +3883,8 @@ snapshots:

  queue-microtask@1.2.3: {}

+  quick-lru@6.1.2: {}
+
  read@2.1.0:
    dependencies:
      mute-stream: 1.0.0
@ -4184,6 +4249,8 @@ snapshots:

  tweetnacl@0.14.5: {}

+  type-fest@4.41.0: {}
+
  typed-array-buffer@1.0.3:
    dependencies:
      call-bound: 1.0.4
--- a/src/main.ts
+++ b/src/main.ts
@ -1,4 +1,4 @@
-import { DO_MAIN, CLIENT_ID }from '@/utils/secret';
+import { APP_ID, END_POINT }from '@/utils/secret';
 // 样式引入
 import "@/assets/styles/reset.scss";
 import "@/assets/styles/common.scss";
@ -12,7 +12,7 @@ import 'vfonts/Lato.css'// 通用字体
 import 'vfonts/FiraCode.css'// 等宽字体
 import 'virtual:svg-icons-register'; //SVG精灵图册
 // 登录授权相关
-import { createAuth0 } from '@auth0/auth0-vue';
+import { createLogto, LogtoConfig } from '@logto/vue';
 import { createApp } from 'vue'
 import App from './App.vue';
 // 全局组件
@ -23,17 +23,17 @@ const app = createApp(App);

 app.component('svg-icon',SvgIcon); //图标组件
 app.use(LsComponent); //零枢封装组件
-app.use(
-  createAuth0({
-    domain: DO_MAIN,
-    clientId: CLIENT_ID,
-    authorizationParams: {
-      redirect_uri: `${window.location.origin}/callback`,
-      audience: "https://AGSSadmin.ASGG.com",
-      scope: 'read:data', // 请求用户基本信息
-    }
-  })
-);
+
+// 鉴权
+const config: LogtoConfig = {
+  endpoint: END_POINT,
+  appId: APP_ID,
+};
+app.use(createLogto, {
+  ...config,
+  scopes: ['shopping:read', 'shopping:write', 'store:read', 'store:write'],
+  resources: [import.meta.env.VITE_API_BASE_URL],
+});

 app.use(pinia);
 app.use(router);
--- a/src/views/layout/components/LayoutHeader.vue
+++ b/src/views/layout/components/LayoutHeader.vue
@ -19,7 +19,8 @@

 <script setup lang='ts'>
 import { removeToken } from '@/utils/auth';
-import { useAuth0 } from '@auth0/auth0-vue';
+import { useLogto } from '@logto/vue';
+
 import {
    Pencil as EditIcon,
    LogOutOutline as LogoutIcon,
@ -27,7 +28,7 @@ import {
    CaretDownOutline
 } from '@vicons/ionicons5';
 import { NIcon } from 'naive-ui';
-const { logout } = useAuth0();
+const { signOut } = useLogto();
 const router = useRouter();
 function renderIcon(icon: Component) {
    return () => {
@ -57,7 +58,7 @@ const options = [
 const handleSelect = (key: string | number) => {
    if (key === 'logout') {
        removeToken()
-        logout({ logoutParams: { returnTo: window.location.origin } });
+        signOut(import.meta.env.VITE_FRONT_DEVELOP);
        router.push('/');
    }
 }
--- a/src/views/login/OauthCallBack.vue
+++ b/src/views/login/OauthCallBack.vue
@ -4,34 +4,36 @@
  </div>
 </template>

-<script setup>
+<script setup lang="ts">
 import { setToken } from '@/utils/auth';
-import { useAuth0 } from '@auth0/auth0-vue';
+import { useLogto } from '@logto/vue';
 import { useMessage } from 'naive-ui';
-import { isNewUser,getUserInfo } from '@/api/userApi';
-const { getAccessTokenSilently } = useAuth0();
+import { isNewUser, getUserInfo } from '@/api/userApi';
+const { isAuthenticated, getAccessToken } = useLogto();
 const router = useRouter();
 const message = useMessage();
-const oSomethingWithToken = async () => {
-  try {
-    const token = await getAccessTokenSilently();
-    setToken(token);
-    const isCompleteInfo = await isNewUser(); //表示是否完成信息登记 true表示完成
-    if(!isCompleteInfo) return router.push('/register');
-    const result = await getUserInfo();
-    console.log(result,'result'); //后面userInfo要存到store里面
-    //TODO
-    message.success('登录成功！');
-    router.push('/layout');
-  } catch (error) {
-    router.push('/');
-    message.error(error.message);
+watch(() => isAuthenticated.value, (newVal) => {
+  if (newVal) {
+    (async () => {
+      try {
+        const accessToken = await getAccessToken(import.meta.env.VITE_API_BASE_URL);
+        console.log(accessToken);
+        setToken(accessToken);
+        const isCompleteInfo = await isNewUser(); //表示是否完成信息登记 true表示完成
+        if (!isCompleteInfo) return router.push('/register');
+        const result = await getUserInfo();
+        console.log(result, 'result'); //后面userInfo要存到store里面
+        //TODO
+        message.success('登录成功！');
+        router.push('/layout');
+      } catch (error) {
+        router.push('/');
+        message.error(error.message);
+      }
+    })();
  }
-
-}
-
-onMounted(() => {
-  oSomethingWithToken();
+},{
+  immediate:true
 })
 </script>

--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@ -204,7 +204,7 @@

 <script setup lang="ts">
 import { ChevronForward, GitCompare, BarChartSharp, Server } from '@vicons/ionicons5';
-import { useAuth0 } from '@auth0/auth0-vue';
+import { useLogto } from '@logto/vue';
 import { useDialog, useMessage } from 'naive-ui';
 const dialog = useDialog();
 const message = useMessage();
@ -217,9 +217,9 @@ const handleDemo = async () => {
  console.log('代码演示一下！！！');
 }

-const { loginWithRedirect } = useAuth0();
+const { signIn } = useLogto();
 const handleLogin = () => {
-  loginWithRedirect();
+  signIn(`${import.meta.env.VITE_FRONT_DEVELOP}/callback`);
 }

 // 联系我们