第三方授权登录

public/version.json

@@ -1,3 +1,3 @@
 {
-  "value": "20240125152622"
+  "value": "20240131104345"
 }

src/api/request/header.js

@@ -1,10 +1,17 @@
+import pinia from '~src/store/init'
+import { useAppStore } from '~src/store'
 import { Base64 } from 'js-base64'
 import website from '~src/config'
 import { getToken } from '~src/api/util/auth'
 
+//初始变量
+const store = useAppStore(pinia)
+
 export function getTokenHeader(text = false) {
     let headers = {}
     headers['Authorization'] = `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`
+    headers['Client-Id'] = website.clientId
+    headers['Tenant-Id'] = store.tenantId
     //让每个请求携带token
     const token = getToken()
     if (token) headers[website.tokenHeader] = 'bearer ' + token

src/api/request/httpApi.js

@@ -1,12 +1,21 @@
 import request from './index'
+import pinia from '~src/store/init'
+import { useAppStore } from '~src/store'
 import { getObjValue } from 'js-fast-way'
+import website from '~src/config'
 import { apiErrorMessage, apiWarningMessage } from '~com/message/index.js'
 
+//初始变量
+const store = useAppStore(pinia)
+
 //封装的请求
 export const httpApi = async (obj, message = true) => {
     // eslint-disable-next-line no-async-promise-executor
     return new Promise(async (resolve) => {
         //发起请求
+        obj.headers = obj.headers ?? {}
+        obj.headers['Client-Id'] = obj.headers['Client-Id'] ?? website.clientId
+        obj.headers['Tenant-Id'] = obj.headers['Tenant-Id'] ?? store.tenantId
         const { code, res } = await request(obj)
         if (code === 200) {
             resolve(await getResData(res, false))

src/router/index.js

@@ -14,7 +14,7 @@ const router = vueRouter.createRouter({
 //路由拦截
 router.beforeResolve(async (to) => {
     NProgress.start()
-    const token = getToken(), auth = ['/login', '/auth', '/app/table-form']
+    const token = getToken(), auth = ['/login', '/auth', '/auth-token', '/app/table-form']
     if (auth.indexOf(to.path) !== -1) {
         return true
     } else if (!token) {

src/router/modules/base.js

@@ -15,14 +15,13 @@ export default [
     {
         path: '/auth',
         name: 'auth',
-        meta: { title: '授权登录' },
-        component: () => import('~src/views/home/auth.vue'),
+        redirect: '/auth-token',
     },
     {
         path: '/auth-token',
         name: 'auth-token',
         meta: { title: '授权登录' },
-        component: () => import('~src/views/user/auth.vue'),
+        component: () => import('~src/views/home/auth.vue'),
     },
     {
         path: '/app/table-form',

src/store/modules/user.js

@@ -9,6 +9,11 @@ import { logout, refreshToken, userLogin } from '~api/user'
 import { userConfigInfo, userConfigSave } from '~api/other'
 import { ArrToOneObj, arrIndex, getArrValue, getObjValue } from 'js-fast-way'
 import { useOsTheme } from 'hc-vue3-ui'
+import { setAppName } from '~uti/tools'
+import website from '~src/config'
+
+import logoIcon from '~src/assets/logo/icon.png'
+import logoName from '~src/assets/logo/name.png'
 
 //初始变量
 const store = useAppStore(pinia)
@@ -17,21 +22,52 @@ const store = useAppStore(pinia)
 export const useAppLogin = async (form) => {
     const { error, status, res } = await userLogin(form)
     if (!error && status === 200) {
-        store.setTokenVal(res['access_token'])
-        store.setRefreshTokenVal(res['refresh_token'])
-        store.setTenantId(res['tenant_id'])
-        store.setUserInfo(res)
-        const routerRes = await setRouterData()
-        if (!routerRes) {
-            return Promise.reject({ msg: '路由异常' })
-        }
-        await initUserConfigInfo()
-        return Promise.resolve({ error, status, res })
+        const info = await setUserAppInfo(res)
+        return { error: info.error, msg: info.msg }
     } else {
         return Promise.reject({ error, status, res })
     }
 }
 
+//设置用户信息
+export const setUserAppInfo = async (res) => {
+    store.setTokenVal(res['access_token'])
+    store.setRefreshTokenVal(res['refresh_token'])
+    store.setTenantId(res['tenant_id'])
+    store.setUserInfo(res)
+    const routerRes = await setRouterData()
+    if (routerRes.length <= 0) {
+        return { error: true, msg: '路由异常' }
+    }
+    await initUserConfigInfo()
+    return { error: false, msg: '成功' }
+}
+
+//设置租户信息
+export const setUserTenantInfo = async (res = {}) => {
+    const { tenantAvatar, tenantAvatarText, tenantTitle, tenantId } = res
+
+    //设置标题
+    const title = tenantTitle ? tenantTitle : website.title
+    store.setTitle(title)
+    setAppName(title)
+
+    //设置logo图标
+    const icon = tenantAvatar ? tenantAvatar : logoIcon
+    store.setLogoIcon(icon)
+
+    //设置logo文字
+    const name = tenantAvatarText ? tenantAvatarText : logoName
+    store.setLogoName(name)
+
+    //设置租户ID
+    const id = tenantId ? tenantId : '000000'
+    store.setTenantId(id)
+
+    //返回数据
+    return { title, icon, name, id }
+}
+
 //用户信息初始化
 export const initUserConfigInfo = async () => {
     const { error, data } = await userConfigInfo()
@@ -84,9 +120,7 @@ export const initUserConfigInfo = async () => {
 export const setRouterData = async () => {
     //请求接口，获取路由数据
     const { error, data } = await getRoutes()
-    if (error) {
-        return Promise.reject(false)
-    }
+    if (error) return []
     const resData = getArrValue(data)
     //数据转换
     let routesObj = {}, routesArr = []
@@ -96,7 +130,7 @@ export const setRouterData = async () => {
     store.setMenus(resData)
     setStoreValue('route', routesObj)
     setStoreValue('routes', routes)
-    return Promise.resolve(true)
+    return resData
 }
 
 //刷新token

src/views/home/auth.vue

@@ -16,12 +16,12 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import { useAppStore } from '~src/store'
-import { loginByToken } from '~api/user'
-import { setAppName } from '~uti/tools'
+import { getTenantID, loginByToken } from '~api/user'
+import { getTopUrl } from '~uti/tools'
 import { useRoute, useRouter } from 'vue-router'
 import svg403 from '~src/assets/view/403.svg'
-import { initUserConfigInfo, setRouterData } from '~sto/user'
-import { getObjVal, isNullES } from 'js-fast-way'
+import { getObjVal, getObjValue, isNullES } from 'js-fast-way'
+import { setUserAppInfo, setUserTenantInfo } from '~sto/user'
 
 //初始变量
 const router = useRouter()
@@ -37,39 +37,43 @@ const isErrorShow = ref(false)
 
 //渲染完成
 onMounted(() => {
-    // http://档案的域名/#/auth?token=xxxxxxx
-    const token = useRoutes?.query?.token
+    // http://质检的域名/#/auth-token?token=xxxxxxx
+    const { token, tenantid } = getObjValue(useRoutes.query)
     if (!isNullES(token)) {
         isErrorShow.value = false
-        loginByTokenApi({
-            token: token,
-        })
+        setLoginByTokenData(token, tenantid)
     } else {
         loading.value = false
         isErrorShow.value = true
     }
 })
 
+//获取租户id
+const getTenantIdApi = async () => {
+    const { data } = await getTenantID(getTopUrl())
+    const { id } = await setUserTenantInfo(getObjVal(data))
+    return id
+}
+
+//设置租户信息
+const setLoginByTokenData = async (token, tenant_id) => {
+    const tenantIds = await getTenantIdApi()
+    const tenantId = tenant_id ? tenant_id : tenantIds
+    await loginByTokenApi({ token, tenantId })
+}
+
 //请求授权登录
 const loginByTokenApi = async (form) => {
     const { error, code, data } = await loginByToken(form)
     const res = getObjVal(data)
     if (!error && code === 200 && res) {
-        useAppState.setTokenVal(res['access_token'])
-        useAppState.setRefreshTokenVal(res['refresh_token'])
-        useAppState.setTenantId(res['tenant_id'])
-        useAppState.setUserInfo(res)
-        await setRouterData()
-        await initUserConfigInfo()
-        loading.value = false
-        isErrorShow.value = false
-        //设置标题
-        useAppState.setTitle('')
-        useAppState.setLogoIcon('')
-        useAppState.setLogoName('')
-        setAppName('')
-        window?.$message?.success('授权登录成功')
-        router.push({ path: '/home/index' })
+        await setUserAppInfo(res)
+        setTimeout(() => {
+            loading.value = false
+            isErrorShow.value = false
+            window?.$message?.success('授权登录成功')
+            router.push({ path: '/home/index' })
+        }, 1500)
     } else {
         window.$message?.error('授权登录失败')
         isErrorShow.value = true

src/views/login/index.vue

@@ -69,14 +69,11 @@
 import { nextTick, onMounted, ref } from 'vue'
 import router from '~src/router/index'
 import { useAppStore } from '~src/store'
-import { useAppLogin } from '~sto/user'
+import { setUserTenantInfo, useAppLogin } from '~sto/user'
 import { getTenantID } from '~api/user'
-import config from '~src/config/index'
-import { getTopUrl, setAppName } from '~uti/tools'
+import { getTopUrl } from '~uti/tools'
 import HcPicVue from './components/pic.vue'
 import HcHomeBg from './components/home-bg.vue'
-import logoIcon from '~src/assets/logo/icon.png'
-import logoName from '~src/assets/logo/name.png'
 import { formValidate, getObjVal, setImageColorStyle } from 'js-fast-way'
 
 const userStore = useAppStore()
@@ -136,45 +133,12 @@ const passwordKeyUp = (e) => {
 const getTenantIdApi = async () => {
     const { error, code, data } = await getTenantID(getTopUrl())
     const res = getObjVal(data)
-    if (!error && code === 200 && res) {
-        const { tenantAvatar, tenantAvatarText, tenantTitle, tenantId } = res
-        tenantMode.value = false
-        //设置标题
-        userStore.setTitle(tenantTitle)
-        setAppName(tenantTitle)
-
-        //设置logo图标
-        const logoIconValue = tenantAvatar ? tenantAvatar : logoIcon
-        appLogoIcon.value = logoIconValue
-        userStore.setLogoIcon(logoIconValue)
-
-        //设置logo文字
-        const logoNameValue = tenantAvatarText ? tenantAvatarText : logoName
-        appLogoName.value = logoNameValue
-        userStore.setLogoName(logoNameValue)
-
-        //设置租户ID
-        formValue.value.tenantId = tenantId
-        userStore.setTenantId(tenantId)
-    } else {
-        tenantMode.value = true
-        //设置标题
-        userStore.setTitle(config.title)
-        setAppName(config.title)
-
-        //设置logo图标
-        appLogoIcon.value = logoIcon
-        userStore.setLogoIcon(logoIcon)
-
-        //设置logo文字
-        appLogoName.value = logoName
-        userStore.setLogoName(logoName)
-
-        //设置租户ID
-        formValue.value.tenantId = '000000'
-        userStore.setTenantId('000000')
-    }
-    nextTick(() => {
+    tenantMode.value = !(!error && code === 200 && res)
+    const { icon, name, id } = await setUserTenantInfo(res)
+    appLogoIcon.value = icon //设置logo图标
+    appLogoName.value = name //设置logo文字
+    formValue.value.tenantId = id //设置租户ID
+    await nextTick(() => {
         setAppImageColor()
     })
 }
@@ -183,21 +147,27 @@ const getTenantIdApi = async () => {
 const loading = ref(false)
 const formValidateClick = async () => {
     const formRes = await formValidate(formRef.value)
-    if (formRes) {
-        loading.value = true
-        useAppLogin(formValue.value).then(() => {
-            loading.value = false
-            window?.$message?.success('登录成功')
-            console.log(IndexModel.value, 'IndexModel')
-            if (IndexModel.value === '1') {
-                router.push({ path: '/home/index' })
-            } else {
-                router.push({ path: '/home/index/static' })
-            }
-        }).catch(() => {
-            loading.value = false
-        })
+    if (!formRes) return false
+    //登录请求
+    loading.value = true
+    const { error, msg } = await useAppLogin(formValue.value)
+    //登录失败
+    if (error) {
+        loading.value = false
+        window?.$message?.error(msg)
+        return false
     }
+    //登录成功
+    loading.value = false
+    window?.$message?.success('登录成功')
+    setTimeout(() => {
+        loading.value = false
+        if (IndexModel.value === '1') {
+            router.push({ path: '/home/index' })
+        } else {
+            router.push({ path: '/home/index/static' })
+        }
+    }, 1500)
 }
 
 //游客登录

src/views/user/auth.vue

@@ -1,105 +0,0 @@
-<template>
-    <div v-loading="loading" class="hc-body-loading" element-loading-text="授权登录中...">
-        <div v-if="isErrorShow" class="error-page">
-            <div :style="`background-image: url(${svg403});`" class="img" />
-            <div class="content">
-                <h1>403</h1>
-                <div class="desc">
-                    抱歉，token授权登录异常，请重新进入
-                </div>
-                <div class="actions">
-                    <el-button block size="large" type="primary" @click="toLoginTap">
-                        手动登录
-                    </el-button>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { onMounted, ref } from 'vue'
-import { useAppStore } from '~src/store'
-import { loginByToken } from '~api/user'
-import { setAppName } from '~uti/tools'
-import { useRoute, useRouter } from 'vue-router'
-import svg403 from '~src/assets/view/403.svg'
-import { initUserConfigInfo, setRouterData } from '~sto/user'
-import { getObjVal } from 'js-fast-way'
-
-//初始变量
-const router = useRouter()
-const useRoutes = useRoute()
-const useAppState = useAppStore()
-
-//先清理下缓存
-useAppState.clearStoreData()
-
-//变量
-const loading = ref(true)
-const isErrorShow = ref(false)
-
-//渲染完成
-onMounted(() => {
-    // 域名后加  /#/auth?token=xxxxxxx&account=aaaa&timestamp=1670233144838&timeInterval=300&moduleCode=UTF-8
-    // eslint-disable-next-line no-unsafe-optional-chaining
-    // const { token, account, timestamp, timeInterval, moduleCode } = useRoutes?.query
-    const { token } = useRoutes?.query
-    // if (token && account && timestamp && timeInterval && moduleCode) {
-        if (token ) {
-        isErrorShow.value = false
-        loginByTokenApi({
-            token: token,
-            // account: account,
-            // timestamp: timestamp,
-            // timeInterval: timeInterval,
-            // moduleCode: moduleCode,
-        })
-    } else {
-        loading.value = false
-        isErrorShow.value = true
-    }
-})
-
-//请求授权登录
-const loginByTokenApi = async (form) => {
-    const { error, code, data } = await loginByToken(form)
-    const res = getObjVal(data)
-    if (!error && code === 200 && res) {
-        useAppState.setTokenVal(res['access_token'])
-        useAppState.setRefreshTokenVal(res['refresh_token'])
-        useAppState.setTenantId(res['tenant_id'])
-        useAppState.setUserInfo(res)
-        await setRouterData()
-        await initUserConfigInfo()
-        loading.value = false
-        isErrorShow.value = false
-         //设置标题
-         useAppState.setTitle('')
-         useAppState.setLogoIcon('')
-         useAppState.setLogoName('')
-         setAppName('')
-        window?.$message?.success('授权登录成功')
-        await router.push({ path: '/home/index' })
-   
-    } else {
-        window.$message?.error('授权登录失败')
-        isErrorShow.value = true
-        loading.value = false
-    }
-}
-
-//跳转登陆
-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>