feat:oauth代码提交

.gitignore

@@ -10,6 +10,7 @@ lerna-debug.log*
 node_modules
 dist
 dist-ssr
+secret.js
 *.local
 .vscode
 # Editor directories and files

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");

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({

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';

src/views/layout/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>首页</div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped></style>

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>

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>
+<style lang="scss" scoped></style>

vite.config.ts

@@ -11,7 +11,7 @@ export default defineConfig({
       imports: ["vue", "vue-router"],
       defaultExportByFilename: true,
       dirs: ["./src/api"],
-    }),
+    })
   ],
   resolve: {
     alias: {