From 056c694a926d9643bf9f533b914fd7064fc26b81 Mon Sep 17 00:00:00 2001
From: XieYongHong <18010623010@163.com>
Date: Thu, 27 Apr 2023 17:57:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Diot=E8=B4=A6=E5=8F=B7?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=E7=99=BB=E5=BD=95=E5=8F=AF=E8=A7=86=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 优化oauth页面

* fix: 修复iot账号无法登录可视化
---
 config/config.ts          |   2 +-
 src/router/index.ts       |   7 +--
 src/utils/request.ts      |  19 +++++--
 src/views/oauth/index.vue | 111 ++++++++++++++++++++++++--------------
 4 files changed, 91 insertions(+), 48 deletions(-)

diff --git a/config/config.ts b/config/config.ts
index 9a3c3b8a..6b94b56b 100644
--- a/config/config.ts
+++ b/config/config.ts
@@ -6,7 +6,7 @@ export default {
   title: 'Jetlinks', // 浏览器标签页title
   layout: {
     title: '物联网平台', // 平台title
-    logo: '/icons/icon-192x192.png', // 平台logo
+    logo: '/logo.png', // 平台logo
     siderWidth: 208, // 左侧菜单栏宽度
     headerHeight: 48, // 头部高度
     collapsedWidth: 48,
diff --git a/src/router/index.ts b/src/router/index.ts
index 1ecbc43e..1641803e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import menus, { AccountCenterBindPath, InitHomePath, LoginPath } from './menu'
+import menus, { AccountCenterBindPath, InitHomePath, LoginPath, OauthPath } from './menu'
 import { cleanToken, getToken } from '@/utils/comm'
 import { useUserInfo } from '@/store/userInfo'
 import { useSystem } from '@/store/system'
@@ -14,12 +14,13 @@ const router = createRouter({
   }
 })
 
-const filterPath = [ InitHomePath, AccountCenterBindPath ]
+const filterPath = [ InitHomePath ]
+const noTokenPath = [ AccountCenterBindPath, OauthPath ]
 
 router.beforeEach((to, from, next) => {
   // TODO 切换路由取消请求
   const token = getToken()
-  if (to.path === AccountCenterBindPath) {
+  if (noTokenPath.includes(to.path)) {
     next()
   } else if (token) {
     if (to.path === LoginPath) {
diff --git a/src/utils/request.ts b/src/utils/request.ts
index 9676b40d..f6b2d6ed 100644
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -13,7 +13,16 @@ interface AxiosResponseRewrite<T = any[]> extends AxiosResponse<T, any> {
 
 export const SUCCESS_CODE = 200 // 成功代码
 
-const filterApiUrl = ['/system/version', '/system/config/front', '/authorize/captcha/config', '/application/sso/_all', '/authorize/captcha/image', '/application/sso/bind-code', '/authorize/login']
+const filterApiUrl = [
+  '/system/version',
+  '/system/config/front',
+  '/authorize/captcha/config',
+  '/application/sso/_all',
+  '/authorize/captcha/image',
+  '/application/sso/bind-code',
+  '/authorize/login',
+  '/application/'
+]
 
 export const request = axios.create({
   withCredentials: false,
@@ -149,10 +158,10 @@ const errorHandler = (error: any) => {
     } else if (status === 401) {
       showNotification('Unauthorized', '用户未登录', '401')
       setTimeout(() => {
-        cleanToken()
-        router.replace({
-          path: LoginPath
-        })
+        // cleanToken()
+        // router.replace({
+        //   path: LoginPath
+        // })
       }, 0)
     } else if (status === 404) {
       showNotification(error?.code, error?.response?.data?.message, '404')
diff --git a/src/views/oauth/index.vue b/src/views/oauth/index.vue
index 547796f1..6fc36ac6 100644
--- a/src/views/oauth/index.vue
+++ b/src/views/oauth/index.vue
@@ -14,9 +14,10 @@
                   <div class='oauth-content-header'>
                     <img :src='headerImg' />
                   </div>
+                  <h2>授权登录</h2>
                   <div class='oauth-content-content'>
                     <div class='oauth-content-content-text'>
-                      您正在授权登录,{{ appName }}将获得以下权限:
+                      您正在授权登录, {{ appName }} 将获得以下权限:
                     </div>
                     <ul>
                       <li>关联{{userName}}账号</li>
@@ -32,15 +33,16 @@
                   <div class='oauth-content-header'>
                     <img :src='headerImg' />
                   </div>
+                  <h2>授权登录</h2>
                   <div class='oauth-content-login'>
-                    <j-form layout='horizontal' size='large' :model='formModel' >
-                      <j-form-item name='username'>
+                    <j-form layout='vertical' :model='formModel' ref='formRef' >
+                      <j-form-item label='用户名' name='username' required :rules='[{ required: true, message: "请输入用户名"}]'>
                         <j-input placeholder='用户名' v-model:value='formModel.username' />
                       </j-form-item>
-                      <j-form-item name='password'>
+                      <j-form-item label='密码' name='password' required :rules='[{ required: true, message: "请输入密码"}]'>
                         <j-input-password placeholder='密码' v-model:value='formModel.password' />
                       </j-form-item>
-                      <j-form-item name='verifyCode' v-if='captcha.base64'>
+                      <j-form-item name='verifyCode' v-if='captcha.base64' required :rules='[{ required: true, message: "请输入验证码"}]'>
                         <j-input placeholder='请输入验证码' v-model:value='formModel.verifyCode' >
                           <template #addonAfter>
                             <img
@@ -72,9 +74,10 @@
 
 <script setup lang='ts' name='Oauth'>
 import { TOKEN_KEY } from '@/utils/variable'
-import { config, code, getOAuth2, initApplication, authLogin } from '@/api/login'
+import { config, code, getOAuth2, initApplication, authLogin, settingDetail } from '@/api/login'
 import { getMe_api } from '@/api/home'
-import { getImage } from '@/utils/comm'
+import { getImage, getToken } from '@/utils/comm'
+import Config from '../../../config/config'
 
 const spinning = ref(true)
 const isLogin = ref(false)
@@ -85,6 +88,9 @@ const userName = ref('-')
 const internal = ref('false')
 const params = ref()
 
+document.title = `OAuth授权-${Config.title}`;
+headerImg.value = getImage(Config.layout.logo)
+
 type LoginParam = {
   username: string;
   password: string;
@@ -104,13 +110,18 @@ const captcha = reactive<{base64?: string, key?: string }>({
   key: undefined
 })
 
+const formRef = ref()
+
 const getApplication = async (clientId: string) => {
   const res = await initApplication(clientId)
-  if (res.success) {
+  if (res.success && res.result) {
     appName.value = res.result.name
   }
 }
 
+/**
+ * 获取验证码配置
+ */
 const getCode = async () => {
   const resp = await config()
   if (resp.result?.enabled) {
@@ -138,26 +149,32 @@ const changeAccount = () => {
 }
 
 const getLoginUser = async (data?: any) => {
-  const res = await getMe_api()
-  if (res.success) {
-    userName.value = res.result?.user.name
-    isLogin.value = true
-    getApplication(data.client_id || params.value.client_id)
-    if (data.internal === 'true' || internal.value === 'true') { // 是否走oauth2
-      goOAuth2Fn(data)
+  if (getToken()) { // 未登录
+    const res = await getMe_api()
+    if (res.success) {
+      userName.value = res.result?.user.name
+      isLogin.value = true
+      getApplication(data.client_id || params.value.client_id)
+      if (data.internal === 'true' || internal.value === 'true') { // 是否走oauth2
+        goOAuth2Fn(data)
+      }
+    } else if (res.status === 401) {
+      setTimeout(() => {
+        spinning.value = false
+      })
+      getCode()
+      getApplication(data.client_id || params.value.client_id)
+    } else {
+      setTimeout(() => {
+        spinning.value = false
+      })
     }
-  } else if (res.status === 401) {
-    setTimeout(() => {
-      spinning.value = false
-    })
-    getCode()
-    getApplication(data.client_id || params.value.client_id)
   } else {
+    getApplication(data.client_id || params.value.client_id)
     setTimeout(() => {
       spinning.value = false
     })
   }
-
 }
 
 const getQueryVariable = (variable: any) => {
@@ -172,23 +189,26 @@ const getQueryVariable = (variable: any) => {
   return '';
 }
 
-const doLogin = async () => {
-  const res = await authLogin({
-    verifyKey: captcha.key,
-    ...formModel
+const doLogin = () => {
+  formRef.value.validate().then( async data => {
+    const res = await authLogin({
+      verifyKey: captcha.key,
+      ...formModel
+    })
+    if (res.success) {
+      const token = res.result.token
+      localStorage.setItem(TOKEN_KEY, token)
+      getLoginUser()
+      // goOAuth2Fn()
+    } else {
+      getCode()
+    }
   })
-  if (res.success) {
-    getLoginUser()
-    const token = res.result.token
-    localStorage.setItem(TOKEN_KEY, token)
-    goOAuth2Fn()
-  } else {
-    getCode()
-  }
 }
 
 const initPage = async () => {
   let redirectUrl
+  // 获取url中的配置信息
   const items = {
     client_id: getQueryVariable('client_id'),
     state: getQueryVariable('state'),
@@ -202,9 +222,8 @@ const initPage = async () => {
     const url = `${origin.join('/')}${items.redirect_uri?.split('redirect=')[1]}`
     // redirectUrl = `${items.redirect_uri?.split('redirect_uri=')[0]}?redirect=${url}`
     redirectUrl = items.redirect_uri
-    console.log(origin, items.redirect_uri)
   }
-
+  // 获取用户信息
   getLoginUser({
     ...items,
     internal: getQueryVariable('internal'),
@@ -218,9 +237,22 @@ const initPage = async () => {
   }
 }
 
-document.title = 'OAuth授权-jetlinks';
-headerImg.value = getImage('/logo.png')
+const getSettingDetail = () => {
+  settingDetail('front').then((res: any) => {
+    if (res.status === 200) {
+      const ico: any = document.querySelector('link[rel="icon"]');
+      ico.href = res.result.ico;
+      headerImg.value = res.result.logo
+      if (res.result.title) {
+        document.title = `OAuth授权-${res.result.title}`;
+      } else {
+        document.title = 'OAuth授权';
+      }
+    }
+  });
+}
 
+getSettingDetail()
 getCode()
 initPage()
 
@@ -309,7 +341,8 @@ initPage()
       gap: 24px;
     }
     .oauth-content-login {
-      max-width: 300px;
+      width: 100%;
+      padding: 0 24px;
     }
   }
 }