From 636e60157e379095e110851e5b2150f44a6e6fc4 Mon Sep 17 00:00:00 2001
From: fangyunong <fangyunogn@ylzinfo.com>
Date: Mon, 30 Jun 2025 16:39:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:oauth=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                        |  1 +
 src/main.ts                       | 36 ++++++++++++++++++++++---------
 src/router/index.ts               | 12 +++++++++++
 src/utils/secret.ts               |  3 +++
 src/views/layout/index.vue        |  9 ++++++++
 src/views/login/OauthCallBack.vue | 28 ++++++++++++++++++++++++
 src/views/login/index.vue         | 18 +++++++++++-----
 vite.config.ts                    |  2 +-
 8 files changed, 93 insertions(+), 16 deletions(-)
 create mode 100644 src/utils/secret.ts
 create mode 100644 src/views/login/OauthCallBack.vue

diff --git a/.gitignore b/.gitignore
index 0e5de52..2ec9414 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+secret.js
 *.local
 .vscode
 # Editor directories and files
diff --git a/src/main.ts b/src/main.ts
index c4730a3..3737375 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,22 +1,38 @@
+// 引入私钥
+import { DO_MAIN, CLIENT_ID } from "@/utils/secret";
 // 样式引入
-import '@/assets/styles/reset.scss'
-import '@/assets/styles/variable.scss';
-import '@/assets/styles/common.scss';
+import "@/assets/styles/reset.scss";
+import "@/assets/styles/variable.scss";
+import "@/assets/styles/common.scss";
 // 引入仓库
-import pinia from '@/store';
+import pinia from "@/store";
 //引入路由
 import router from "@/router";
 // 引入UI组件库相关
-import naive from 'naive-ui';
-import 'vfonts/Lato.css'// 通用字体
-import 'vfonts/FiraCode.css'// 等宽字体
+import naive from "naive-ui";
+import "vfonts/Lato.css"; // 通用字体
+import "vfonts/FiraCode.css"; // 等宽字体
 // 登录授权相关
+import { createAuth0 } from "@auth0/auth0-vue";
 
-import { createApp } from 'vue'
-import App from './App.vue';
+import { createApp } from "vue";
+import App from "./App.vue";
 
 const app = createApp(App);
+
+app.use(
+  createAuth0({
+    domain: DO_MAIN,
+    clientId: CLIENT_ID,
+    authorizationParams: {
+      redirect_uri: `${window.location.origin}/callback`,
+      audience: "https://dev-f8lrenkd107vqnti.us.auth0.com/api/v2",
+      scope: 'read:data', // 请求用户基本信息
+    }
+  })
+);
+
 app.use(pinia);
 app.use(router);
 app.use(naive);
-app.mount('#app')
+app.mount("#app");
diff --git a/src/router/index.ts b/src/router/index.ts
index 7caed2b..2fedccb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,7 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 import Login from "@/views/login/index.vue"; //登录组件
+import Layout from '@/views/layout/index.vue';
+import CallBack from '@/views/login/OauthCallBack.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -7,6 +9,16 @@ const routes: Array<RouteRecordRaw> = [
     name: "Login",
     component: Login,
   },
+  {
+    path:'/callback',
+    name:'CallBack',
+    component:CallBack
+  },
+  {
+    path: "/layout",
+    name: "Layout",
+    component: Layout,
+  },
 ];
 
 const router = createRouter({
diff --git a/src/utils/secret.ts b/src/utils/secret.ts
new file mode 100644
index 0000000..b59f928
--- /dev/null
+++ b/src/utils/secret.ts
@@ -0,0 +1,3 @@
+export const DO_MAIN = 'dev-f8lrenkd107vqnti.us.auth0.com';
+export const CLIENT_ID = 'VasF4bqvT7iC5Va2ibBT39hu71gdtA9K';
+export const CLINET_KEY = 'hIdwcnNLmc6fPIBxHKqP16LYo3q7hCtB_Cg2R3enylHH28AHM1SEAkOky5zFUTI5';
\ No newline at end of file
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index e69de29..4ab6171 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -0,0 +1,9 @@
+<template>
+  <div>首页</div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/views/login/OauthCallBack.vue b/src/views/login/OauthCallBack.vue
new file mode 100644
index 0000000..5fd841b
--- /dev/null
+++ b/src/views/login/OauthCallBack.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>这是callback页面 {{ token }}</div>
+</template>
+
+<script setup>
+  import { useAuth0 } from '@auth0/auth0-vue';
+  import { useMessage } from 'naive-ui';
+ const { getAccessTokenSilently } = useAuth0();
+ const token = ref('');
+ const router = useRouter();
+ const message = useMessage();
+const oSomethingWithToken = async () => {
+  try {
+      token.value = await getAccessTokenSilently();
+      message.success('登录成功！');
+      router.push('/layout');
+  }catch(error){
+      router.push('/');
+      message.error('错误！');
+  }
+
+}
+onMounted(()=>{
+  oSomethingWithToken();
+})
+</script>
+
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index d90d417..f1b720d 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,11 +1,19 @@
 <template>
-  
+  <n-button type="primary" @click="login">登录</n-button>
+
+
+  <n-button @click="handleLogin">Log out</n-button>
 </template>
 
 <script setup>
-
+import { useAuth0 } from '@auth0/auth0-vue';
+const { loginWithRedirect,logout  } = useAuth0();
+const login = () => {
+  loginWithRedirect();
+}
+const handleLogin =  () => {
+  logout({ logoutParams: { returnTo: window.location.origin } });
+}
 </script>
 
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
+<style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 701b3f1..92ff734 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -11,7 +11,7 @@ export default defineConfig({
       imports: ["vue", "vue-router"],
       defaultExportByFilename: true,
       dirs: ["./src/api"],
-    }),
+    })
   ],
   resolve: {
     alias: {