refactor(plugin): optimize error msg if there are not authorized

Author: Kinplemelon

src/api/plugins.ts

@@ -13,7 +13,7 @@ export const queryPluginDetail = (nameWithVersion: string): Promise<PluginDetail
 export const installPlugin = (file: File): Promise<void> => {
   const form = new FormData()
   form.append('plugin', file)
-  return http.post(`/plugins/install`, form)
+  return http.post(`/plugins/install`, form, { errorsHandleCustom: [403] })
 }
 
 export const uninstallPlugin = (nameWithVersion: string): Promise<void> => {

src/common/http.js

@@ -68,7 +68,7 @@ const readBlobResponse = async (data) => {
   }
 }
 
-const getErrorMessage = (data, status) => {
+export const getErrorMessage = (data, status) => {
   if (!data) {
     return `${status} Network error`
   }

src/i18n/Plugins.js

@@ -124,8 +124,8 @@ export default {
     en: 'This plugin does not support configuration via the Dashboard.',
   },
   pluginInstallGuidance: {
-    zh: `为确保系统安全，EMQX 不允许直接通过 Dashboard 上传并安装插件。点击“安装”按钮前，需先使用命令 \`emqx ctl plugins allow {'{'}NAME{'}'}-{'{'}VSN{'}'}\` 授权插件安装，命令行执行后对集群内所有节点生效。安装完毕后当次授权失效，如需再次安装，需重新授权。<br /><br />或用其他方法将插件包上传到 EMQX 所在服务器的 plugins/ 目录并解压安装包进行安装。`,
-    en: `To ensure system security, EMQX does not allow direct upload and installation of plugins through the Dashboard. Before clicking the "Install" button, you need to use the command \`emqx ctl plugins allow {'{'}NAME{'}'}-{'{'}VSN{'}'}\` to allow plugin installation. After the command is executed, it takes effect on all nodes in the cluster. After the installation is complete, the current authorization expires. If you need to install it again, you need to authorize again. <br /><br />Or use other methods to upload the plugin package to the plugins/ directory on the EMQX server and extract the package for installation.`,
+    zh: `为确保系统安全，EMQX 不允许直接通过 Dashboard 安装插件。点击“安装”按钮前，需先使用命令 \`emqx ctl plugins allow {'{'}NAME{'}'}-{'{'}VSN{'}'}\` 授权插件安装，命令行执行后对集群内所有节点生效。安装完成后，授权将失效，如需再次安装插件，请重新授权。<br /><br />您也可以通过其他方法将插件包上传到 EMQX 服务器的 plugins/ 目录，并解压安装包进行安装。`,
+    en: `To ensure system security, EMQX does not allow direct installation of plugins through the Dashboard. Before clicking the "Install" button, you need to use the command \`emqx ctl plugins allow {'{'}NAME{'}'}-{'{'}VSN{'}'}\` to allow plugin installation. After the installation is complete, the current authorization expires. If you need to install it again, you need to authorize again. <br /><br />You can also upload the plugin package to the plugins/ directory on the EMQX server and extract the package for installation.`,
   },
   pluginInstallCommand: {
     zh: '授权插件安装命令：',
@@ -135,4 +135,8 @@ export default {
     zh: '请先上传插件包',
     en: 'Please upload the plugin package first',
   },
+  pluginInstallForbidden: {
+    zh: '插件包不允许安装; 请先运行命令: <code>{code}</code>',
+    en: 'Package is not allowed installation; first allow it to be installed by running: <code>{code}</code>',
+  },
 }

src/views/Plugins/PluginInstall.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="plugin-install app-wrapper">
     <detail-header :item="{ name: t('components.plugin-install'), path: '/plugins' }" />
+    <TipContainer>
+      <MarkdownContent :content="tl('pluginInstallGuidance')" />
+    </TipContainer>
     <el-card class="app-card plugin-install-card">
-      <TipContainer>
-        <MarkdownContent :content="tl('pluginInstallGuidance')" />
-      </TipContainer>
       <el-upload
         class="plugin-uploader"
         drag
@@ -54,6 +54,9 @@ import { ElMessage } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import { installPlugin } from '@/api/plugins'
 import DetailHeader from '@/components/DetailHeader.vue'
+import CustomMessage from '@/common/CustomMessage'
+import { getErrorMessage } from '@/common/http'
+import xss from 'xss'
 
 const router = useRouter()
 const { t } = useI18n()
@@ -82,8 +85,21 @@ const submit = async () => {
     await installPlugin(file.value as File)
     ElMessage.success(tl('successfulInstallation'))
     router.push({ name: 'plugins' })
-  } catch (error) {
-    console.error(error)
+  } catch (error: any) {
+    const { data, status } = error?.response ?? {}
+    if (status === 403) {
+      if (data?.code === 'FORBIDDEN') {
+        const cmd = data.message.match(/`(.*?)`/)?.[1]
+        ElMessage({
+          dangerouslyUseHTMLString: true,
+          message: xss(t('Plugins.pluginInstallForbidden', { code: cmd })),
+          customClass: 'markdown-body',
+          type: 'error',
+        })
+      } else {
+        CustomMessage.error(getErrorMessage(data, status))
+      }
+    }
   } finally {
     isUploading.value = false
   }
@@ -100,14 +116,17 @@ const submit = async () => {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 32px;
+  padding-top: 48px;
   padding-bottom: 64px;
 }
 .tip-container {
-  width: 970px;
   margin-bottom: 24px;
+  :deep(.result-tip) {
+    align-items: flex-start;
+  }
   :deep(.icon-tip) {
     margin-right: 8px;
+    margin-top: 3px;
   }
   :deep(.markdown-body) {
     font-size: 14px;
@@ -128,7 +147,7 @@ const submit = async () => {
   opacity: 0.78;
 }
 .plugin-uploader {
-  width: 400px;
+  width: 440px;
   margin-left: auto;
   margin-right: auto;
   .icon-plus {
@@ -166,3 +185,9 @@ const submit = async () => {
   }
 }
 </style>
+
+<style lang="scss">
+.el-message.markdown-body {
+  background: #ffe9e7;
+}
+</style>