fix: 修复iot账号无法登录可视化

* fix: bug#12637 * fix: 修复右上角通知文件notification兼容处理 * fix: bug#12637、12632 * fix: bug#12460 * fix: bug#12362 * fix: bug#12350 * fix: bug#12338 * fix: 优化插件映射传参 * fix: 修复采集器查询失败问题 * fix: 修复内部应用页面跳转后显示错误提示的问题 * fix: 修复插件设备映射后没有回显 * fix: 修复插件管理新增id校验失败 * fix: 删除多余代码 * fix: 修复iot账号无法登录可视化 * fix: 优化oauth页面 * fix: 修复iot账号无法登录可视化
2023-04-28 10:42:56 +08:00 · 2023-04-28 10:42:56 +08:00 · efded34ff2
parent df525770f4
commit efded34ff2
14 changed files with 127 additions and 77 deletions
--- 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,
--- a/src/api/link/plugin.ts
+++ b/src/api/link/plugin.ts
@ -21,6 +21,13 @@ export const detail = (id: string) => get(`/plugin/driver/${id}`)
 */
 export const getProductsById = (id: string) => get(`/plugin/driver/${id}/products`)

+/**
+ *
+ * @param type product：产品;device：设备
+ * @param pluginId 设备接入id
+ * @param internalId 产品或者设备id
+ * @param externalId  映射id
+ */
 export const savePluginData = (type: string, pluginId: string, internalId: string, externalId: string ) => patch(`/plugin/mapping/${type}/${pluginId}/${internalId}`, externalId, { headers: {'Content-Type': "text/plain"}})

 export const getPluginData = (type: string, pluginId: string, internalId: string ) => get(`/plugin/mapping/${type}/${pluginId}/${internalId}`)
--- 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) {
--- a/src/utils/menu.ts
+++ b/src/utils/menu.ts
@ -280,7 +280,8 @@ export function filterAsyncRouter(asyncRouterMap: any, parentCode = '', level =
        icon: route.icon,
        title: route.name,
        hideInMenu: route.isShow === false,
-        buttons: route.buttons?.map((b: any) => b.id) || []
+        buttons: route.buttons?.map((b: any) => b.id) || [],
+        isApp: hasAppId,
      },
    }

--- 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')
--- a/src/views/DataCollect/Collector/Tree/index.vue
+++ b/src/views/DataCollect/Collector/Tree/index.vue
@ -157,19 +157,17 @@ const defualtDataSource: any = ref(_.cloneDeep(root));
 const defualtParams = {
    paging: false,
    sorts: [{ name: 'createTime', order: 'desc' }],
-    terms: [
+    terms: !!channelId ? [
        {
-            terms: !!channelId
-                ? [
+            terms: [
                      {
                          column: 'channelId',
                          value: channelId,
                      },
-                  ]
-                : [],
+                  ],
            type: 'and',
        },
-    ],
+    ] : [],
 };
 const params = ref();

--- a/src/views/device/Instance/Detail/Info/components/InklingModal/index.vue
+++ b/src/views/device/Instance/Detail/Info/components/InklingModal/index.vue
@ -30,10 +30,6 @@ const props = defineProps({
    type: String,
    default: undefined
  },
-  channelId: {
-    type: String,
-    default: undefined
-  },
  id: {
    type: String,
    default: undefined
@ -47,12 +43,14 @@ const route = useRoute()

 const handleOk = async () => {
  if (checkKey.value) {
+    loading.value = true
    const res = await savePluginData(
      'device',
-      props.channelId!,
+      props.accessId!,
      route.params.id as string,
      checkKey.value
    ).catch(() => ({ success: false }))
+    loading.value = false
    if (res.success) {
      emit('submit', checkKey.value)
    }
--- a/src/views/device/Instance/Detail/Info/index.vue
+++ b/src/views/device/Instance/Detail/Info/index.vue
@ -110,7 +110,6 @@
  <InkingModal
    v-if='inkingVisible'
    :id='inklingDeviceId'
-    :channelId='channelId'
    :accessId='instanceStore.current.accessId'
    @cancel="inkingVisible = false"
    @submit='saveInkling'
@ -146,7 +145,8 @@ const saveInkling = (id: string) => {
    instanceStore.refresh(instanceStore.current?.id);
  }
  channelId.value = id
-  giveAnInkling()
+  queryInkling()
+  inkingVisible.value = false
 }

 const giveAnInkling = () => {
@ -158,7 +158,7 @@ const queryInkling = () => {
    queryPluginAccessDetail(instanceStore.current?.accessId).then(async res => {
      if (res.success) {
        channelId.value = res.result.channelId
-        const pluginRes = await getPluginData('device', res.result.channelId, instanceStore.current?.id)
+        const pluginRes = await getPluginData('device',instanceStore.current?.accessId, instanceStore.current?.id)
        if (pluginRes.success) {
          inklingDeviceId.value = pluginRes.result?.externalId
        }
--- a/src/views/device/Product/Detail/DeviceAccess/index.vue
+++ b/src/views/device/Product/Detail/DeviceAccess/index.vue
@ -680,7 +680,7 @@ const getData = async (accessId?: string) => {
      if (productStore.current?.accessProvider === 'plugin_gateway') {
        queryPluginAccessDetail(_accessId).then(async res => { //
          if (res.success) {
-            const pluginRes = await getPluginData('product', res.result.channelId, productStore.current?.id)
+            const pluginRes = await getPluginData('product', _accessId, productStore.current?.id)
            const resp = await getProductByPluginId(res.result.channelId).catch(() => ({ success: false, result: []}))
            if (resp.success) {
              productTypes.value = resp.result.map(item => {
@ -758,10 +758,10 @@ const updateAccessData = async (id: string, values: any) => {
    submitLoading.value = false
  }

-  if (access.value?.provider === "plugin_gateway") {
+  if (access.value?.provider === "plugin_gateway" && productData.id) {
    await savePluginData(
      'product',
-      access.value?.channelId,
+      access.value?.id,
      productStore.current.id,
      productData.id
    ).catch(() => ({}))
--- a/src/views/device/Product/Detail/DeviceAccess/metadataModal.vue
+++ b/src/views/device/Product/Detail/DeviceAccess/metadataModal.vue
@ -133,10 +133,10 @@ const updateAccessData = async (id: string, values: any, metadata: string) => {
    return
  }

-  if (props.access?.provider === 'plugin_gateway') {
+  if (props.access?.provider === 'plugin_gateway' && props.data.productTypeId) {
    await savePluginData(
      'product',
-      props.access.channelId,
+      props.access.id,
      props.data.id,
      props.data.productTypeId
    ).catch(() => ({}))
--- a/src/views/device/Product/Detail/MetadataMap/index.vue
+++ b/src/views/device/Product/Detail/MetadataMap/index.vue
@ -101,11 +101,11 @@ const columns = [
 ]

 const selectedKeys = computed(() => {
-  return dataSource.value.filter(item => !!item?.plugin).map(item => item.id)
+  return dataSource.value?.filter(item => !!item?.plugin).map(item => item.id) || []
 })

 const selectedPluginKeys = computed(() => {
-  return dataSource.value.filter(item => !!item?.plugin).map(item => item.plugin)
+  return dataSource.value?.filter(item => !!item?.plugin).map(item => item.plugin) || []
 })

 const getMetadataMapData = () => {
@ -124,7 +124,6 @@ const getMetadataMapData = () => {
 }

 const search = (value: string) => {
-  console.log(value)
  if (value) {
    dataSource.value = dataSourceCache.value.filter((item: any) => {
      return !!item.name?.includes(value)
@ -152,7 +151,7 @@ const getDefaultMetadata = async () => {
      type: item.valueType?.type,
      plugin: _m?.pluginId, // 插件物模型id
    }
-  })
+  }) || []
  dataSourceCache.value = dataSource.value
 }

@ -161,7 +160,7 @@ const getPluginMetadata = (): Promise<{ properties: any[]}> => {
    queryPluginAccessDetail(productDetail.value?.accessId!).then(async res => {
      if (res.success) {
        const _channelId = (res.result as any)!.channelId
-        const pluginRes = await getPluginData('product', _channelId, productDetail.value?.id).catch(() => ({ success: false, result: {}}))
+        const pluginRes = await getPluginData('product', productDetail.value?.accessId, productDetail.value?.id).catch(() => ({ success: false, result: {}}))
        const resp = await getProductByPluginId(_channelId).catch(() => ({ success: false, result: []}))
        if (resp.success) {
          const _item = (resp.result as any[])?.find((item: any) => item.id === (pluginRes?.result as any)?.externalId)
--- a/src/views/iframe/index.vue
+++ b/src/views/iframe/index.vue
@ -38,10 +38,14 @@ const handle = async (appId: string, url: string) => {
    }
 };

+
 watchEffect(() => {
-    const params = route.path.split('/')?.[1];
-    const url = route.path.split('/').slice(2).join('/');
-    handle(params, url);
+    const matchedItem: any = route.matched?.[0]
+    if (matchedItem?.meta?.isApp) {
+      const params = route.path.split('/')?.[1];
+      const url = route.path.split('/').slice(2).join('/');
+      handle(params, url);
+    }
 });
 </script>

--- a/src/views/link/plugin/Save.vue
+++ b/src/views/link/plugin/Save.vue
@ -94,7 +94,7 @@ const loading = ref(false)
 const vailId = async (_: any, value: string) => {
  if (!props.data.id && value) { // 新增校验
    const resp = await vailIdFn(value)
-    if (resp.success && resp.result) {
+    if (resp.success && resp.result && !resp.result.passed) {
      return Promise.reject('ID重复');
    }
  }
--- 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;
    }
  }
 }