第三方授权登录

src/api/modules/user.js

@@ -80,3 +80,9 @@ export const clearCache = (msg = true) => httpApi({
     url: '/api/blade-auth/oauth/clear-cache',
     method: 'get'
 }, msg);
+
+export const loginByToken = (form, msg = true) => httpApi({
+    url: '/api/blade-user/loginByToken',
+    method: 'post',
+    params: form
+}, msg);

src/router/index.js

@@ -18,6 +18,8 @@ router.beforeResolve(async (to) => {
     const token = getToken()
     if (to.path === '/login') {
         return true
+    } else if (to.path === '/auth') {
+        return true
     } else if (!token) {
         return '/login'
     } else {

src/router/modules/base.js

@@ -12,6 +12,12 @@ export default [
         meta: {title: '登录'},
         component: () => import('~src/views/login/index.vue')
     },
+    {
+        path: '/auth',
+        name: 'auth',
+        meta: {title: '授权登录'},
+        component: () => import('~src/views/user/auth.vue')
+    },
     {
         path: '/home',
         name: 'home',

src/views/error/403.vue

@@ -5,7 +5,7 @@
             <h1>403</h1>
             <div class="desc">抱歉，你无权访问该页面</div>
             <div class="actions">
-                <n-button type="primary" @click="goToHome">返回首页</n-button>
+                <el-button type="primary" block @click="goToHome">返回首页</el-button>
             </div>
         </div>
     </div>

src/views/error/404.vue

@@ -5,7 +5,7 @@
             <h1>404</h1>
             <div class="desc">抱歉，你访问的页面不存在</div>
             <div class="actions">
-                <n-button type="primary" @click="goToHome">返回首页</n-button>
+                <el-button type="primary" block @click="goToHome">返回首页</el-button>
             </div>
         </div>
     </div>

src/views/error/500.vue

@@ -5,7 +5,7 @@
             <h1>500</h1>
             <div class="desc">抱歉，服务器出错了</div>
             <div class="actions">
-                <n-button type="primary" @click="goToHome">返回首页</n-button>
+                <el-button type="primary" block @click="goToHome">返回首页</el-button>
             </div>
         </div>
     </div>

src/views/user/auth.vue

@@ -0,0 +1,63 @@
+<template>
+    <div class="hc-body-loading" v-loading="loading" element-loading-text="授权登录中...">
+        <div class="error-page" v-if="!tokenStr">
+            <div class="img" :style="`background-image: url(${svg403});`"/>
+            <div class="content">
+                <h1>403</h1>
+                <div class="desc">抱歉，token异常，请重新访问，或手动登录</div>
+                <div class="actions">
+                    <el-button type="primary" block @click="toLoginTap">手动登录</el-button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import {ref, onMounted} from "vue";
+import {useAppStore} from "~src/store";
+import {loginByToken} from "~api/user"
+import {useRouter, useRoute} from 'vue-router'
+import svg403 from '~src/assets/view/403.svg';
+import {getIndex,formValidate,getArrValue,isMobile} from "vue-utils-plus"
+
+//初始变量
+const router = useRouter()
+const useRoutes = useRoute()
+const useAppState = useAppStore()
+
+const loading = ref(true)
+
+//路由参数
+const { token } = useRoutes?.query;
+const tokenStr = token?.toString()
+
+//渲染完成
+onMounted(() => {
+    if (tokenStr) {
+        loginByTokenApi(tokenStr);
+    } else {
+        loading.value = false
+    }
+})
+
+//请求授权登录
+const loginByTokenApi = async (tokenStr) => {
+    const {error, code, data} = await loginByToken({token: tokenStr})
+
+}
+
+//跳转登陆
+const toLoginTap = () => {
+    router.push({path: '/login'});
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/error/style.scss";
+.hc-body-loading {
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+</style>