[+] Add logger & Fix leak issue

src/api/base.ts

@@ -1,10 +1,15 @@
+import logger from '@/utils/logger'
+
 const base = {
   api_v1_url: 'https://api.locyanfrp.cn',
   api_v2_url: 'https://api-v2.locyanfrp.cn/api/v2',
   buildResponse: (res: any, useDataPath: boolean = true) => {
+    const message = res.data?.data?.message ?? res.data?.data?.msg ?? res.data?.message ?? res.data?.msg ?? '未指定或请求失败'
+    const data = useDataPath ? res.data?.data : res.data ?? {}
     return {
       status: res.status as number,
-      data: useDataPath ? res.data.data : res.data
+      message: message,
+      data: data
     }
   }
 }

src/components/InstallCsApp.vue

@@ -29,6 +29,7 @@
 import { ref, onMounted } from 'vue'
 import { sendErrorMessage } from '@/utils/message'
 import api from '@/api'
+import logger from '@/utils/logger'
 
 const show = ref(true)
 const file_name = ref('')
@@ -39,6 +40,7 @@ onMounted(async () => {
   try {
     rs = await api.v1.App.GetCSApp()
   } catch (e) {
+    logger.error(e)
     sendErrorMessage('获取下载链接失败: ' + e)
   }
   if (!rs) return

src/components/MainNav.vue

@@ -111,6 +111,7 @@ import router from '@/router/index'
 import UserInfo, { changeUserInfoShow } from './UserInfo.vue'
 import { get } from '@/utils/request'
 import { GitAlt } from '@vicons/fa'
+import logger from '@/utils/logger'
 
 const gitHash = GIT_COMMITHASH
 
@@ -149,6 +150,7 @@ onMounted(async () => {
   try {
     rs = await get('https://v1.hitokoto.cn/', {})
   } catch (e) {
+    logger.error(e)
     hitokoto_content.value = '加载失败'
   }
   if (!rs) {

src/components/UserInfo.vue

@@ -95,6 +95,8 @@ import store from '@/utils/stores/store'
 import { sendSuccessMessage } from '@/utils/message'
 import { onMounted, ref } from 'vue'
 import { useDialog } from 'naive-ui'
+import api from '@/api'
+import logger from '@/utils/logger'
 
 const dialogWidth = ref('30vw')
 const ldb = useLoadingBar()
@@ -141,6 +143,7 @@ onMounted(async () => {
   try {
     rs = await api.v2.oauth.qq.check(store.getters.get_username)
   } catch (e) {
+    logger.error(e)
     bindQQ.value.isDisable = true
     bindQQ.value.msg = ref('未知')
   }
@@ -176,6 +179,7 @@ async function changeEmail() {
         tEmail.value.verify.code
       )
     } catch (e) {
+      logger.error(e)
       message.error('请求换绑失败: ' + e)
       tEmail.value.isEditDisable = true
       tEmail.value.isBtnDisable = false
@@ -187,13 +191,13 @@ async function changeEmail() {
       return
     }
     if (rs.status) {
-      message.success(rs.data.message)
+      message.success(rs.message)
       tEmail.value.isEditDisable = true
       tEmail.value.isBtnDisable = false
       tEmail.value.isEditDisable1 = ref('display:none')
       tEmail.value.msg = '修改'
     } else {
-      message.error(rs.data.message)
+      message.error(rs.message)
       tEmail.value.isEditDisable = true
       tEmail.value.isBtnDisable = false
       tEmail.value.isEditDisable1 = ref('display:none')
@@ -215,6 +219,7 @@ async function sendChangeEmailCode() {
       tEmail.value.email
     )
   } catch (e) {
+    logger.error(e)
     message.error('请求邮件验证码失败: ' + e)
     tEmail.value.verify.isClick = false
     tEmail.value.verify.msg = ref(`发送验证码`)
@@ -224,10 +229,10 @@ async function sendChangeEmailCode() {
     return
   }
   if (rs.status) {
-    message.success(rs.data.message)
+    message.success(rs.message)
     tEmail.value.verify.msg = ref(`已发送`)
   } else {
-    message.error(rs.data.message)
+    message.error(rs.message)
     tEmail.value.verify.isClick = false
     tEmail.value.verify.msg = ref(`发送验证码`)
   }
@@ -240,6 +245,7 @@ async function doBindQQ() {
   try {
     rs = await api.v2.oauth.qq.bind(store.getters.get_username)
   } catch (e) {
+    logger.error(e)
     message.error('请求失败: ' + e)
   }
   if (!rs) return
@@ -255,6 +261,7 @@ async function unBindQQ() {
   try {
     rs = await api.v2.oauth.qq.unbind(store.getters.get_username)
   } catch (e) {
+    logger.error(e)
     binding.value = false
     bindQQ.value.unBindDisable = false
     bindQQ.value.unBindmsg = ref('解绑失败')
@@ -305,6 +312,7 @@ async function changePassword() {
   try {
     rs = await api.v2.users.reset.password(data.username, data.old_password, data.new_password)
   } catch (e) {
+    logger.error(e)
     tPassword.value.isLoading = false
     message.error('修改失败: ' + e)
   }
@@ -315,7 +323,7 @@ async function changePassword() {
     doLogOut()
   } else {
     tPassword.value.isLoading = false
-    message.error('密码修改失败, 后端返回: ' + rs.data.msg)
+    message.error('密码修改失败, 后端返回: ' + rs.message)
   }
 }
 
@@ -337,6 +345,7 @@ async function resetFrpToken() {
       try {
         rs = await api.v2.users.reset.frp_token(data.username)
       } catch (e) {
+        logger.error(e)
         resetFrpTokenLoading.value = false
         message.error('请求失败: ' + e)
       }
@@ -347,7 +356,7 @@ async function resetFrpToken() {
         sendSuccessMessage('重置成功')
       } else {
         resetFrpTokenLoading.value = false
-        message.error('重置失败, 后端返回: ' + rs.data.msg)
+        message.error('重置失败, 后端返回: ' + rs.message)
       }
     },
     onNegativeClick: () => {
@@ -374,6 +383,7 @@ async function exitAllDevices() {
       try {
         rs = await api.v2.users.reset.token.all(data.username)
       } catch (e) {
+        logger.error(e)
         exitAllDevicesLoading.value = false
         message.error('请求失败: ' + e)
       }
@@ -385,7 +395,7 @@ async function exitAllDevices() {
         doLogOut()
       } else {
         exitAllDevicesLoading.value = false
-        message.error('退出失败, 后端返回: ' + rs.data.msg)
+        message.error('退出失败, 后端返回: ' + rs.message)
       }
     },
     onNegativeClick: () => {
@@ -397,7 +407,6 @@ async function exitAllDevices() {
 
 <script>
 import { ref } from 'vue'
-import api from '@/api'
 
 const show = ref(false)
 

src/utils/clipboard.js

@@ -1,5 +1,6 @@
 import Clipboard from 'clipboard'
 import { sendErrorMessage, sendSuccessMessage } from './message'
+import logger from '@/utils/logger'
 
 function clipboardSuccess(msg) {
   sendSuccessMessage(msg || '复制成功')
@@ -10,7 +11,7 @@ function clipboardError(msg) {
 }
 
 export default function handleClipboard(text, event, msg) {
-  console.log('Writing clipboard:\n' + text)
+  logger.info('Writing clipboard: ' + text)
   const clipboard = new Clipboard(event.target, {
     text: () => text
   })

src/utils/logger.ts

@@ -0,0 +1,40 @@
+const style = {
+    info: {
+        levelColor: 'color: #00cc00;'
+    },
+    warn: {
+        levelColor: 'color: #ff9933;'
+    },
+    error: {
+        levelColor: 'color: red;'
+    },
+    reset: 'color: none; background: none;'
+}
+
+const logger = {
+    info: (m: any) => {
+        console.log(
+            `[%cINFO%c] ${m}`,
+            style.info.levelColor,
+            style.reset
+        )
+    },
+    warn: (m: any, clevel = true) => {
+        const fn = (clevel) ? console.warn : console.log
+        fn(
+            `[%cWARN%c] ${m}`,
+            style.warn.levelColor,
+            style.reset
+        )
+    },
+    error: (m: any, clevel = true) => {
+        const fn = (clevel) ? console.error : console.log
+        fn(
+            `[%cERROR%c] ${m}`,
+            style.error.levelColor,
+            style.reset
+        )
+    },
+}
+
+export default logger

src/utils/request.js

@@ -7,6 +7,7 @@ import store from './stores/store'
 import router from '@/router/index'
 import Base64 from 'qs/lib/utils'
 import { sendErrorMessage } from './message'
+import logger from '@/utils/logger'
 // import { logout } from './profile'
 // import { sendErrorMessage } from './message'
 
@@ -21,6 +22,12 @@ import { sendErrorMessage } from './message'
 const instance = axios.create({
   timeout: 80000
 })
+
+const tokenDomains = [
+  'api.locyanfrp.cn',
+  'api-v2.locyanfrp.cn'
+]
+
 // post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设置post的请求头为
 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
 // 添加请求拦截器
@@ -30,12 +37,15 @@ instance.interceptors.request.use(
     // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
     // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
     const token = store.getters.get_token
-    if (token) {
+    // 2024-09-07 Muska_Ami: 修复 Token 泄露问题 只有在指定域名请求时才应该添加 Token
+    const url = new URL(config.url)
+    logger.info(url.hostname + ', ' + url.pathname + ', ' + tokenDomains.includes(url.hostname))
+    if (token && tokenDomains.includes(url.hostname)) {
       // 已经登录成功，统一添加token
-      ;(await config).headers.Authorization = `Bearer ${token}`
+      config.headers.Authorization = `Bearer ${token}`
     }
     // token && (config.headers.Authorization = token);
-    return await config
+    return config
   },
   async (error) => await error
 )

src/utils/stores/store.js

@@ -55,7 +55,7 @@ const store = new vuex.Store({
     },
     // 可选
     set_user_info(state, userdata) {
-      console.log(userdata)
+      // console.log(userdata)
       state.username = userdata.username
       state.email = userdata.email
       state.frptoken = userdata.frp_token

src/utils/websocket.js

@@ -1,27 +1,29 @@
+import logger from '@/utils/logger'
+
 // 在当前js全局化
 let ws
 
 export function init_ws() {
   if ('WebSocket' in window) {
-    console.log('您的浏览器支持 WebSocket!')
+    logger.info('您的浏览器支持 WebSocket!')
     ws = new WebSocket(`wss://ws.api.locyanfrp.cn/api`)
     ws.onopen = function () {
-      console.log('webSocket connect successful')
+      logger.info('webSocket connect successful')
     }
     ws.onclose = function () {
       // 关闭 websocket
-      console.log('webSocket connect closed')
+      logger.warn('webSocket connect closed')
       setTimeout(() => {
         init_ws()
       }, 2000)
     }
   } else {
     // 浏览器不支持 WebSocket
-    console.log('您的浏览器不支持 WebSocket!')
+    logger.error('您的浏览器不支持 WebSocket!')
   }
 }
 
 export function SetOnMessageFunction(handle_function) {
   ws.onmessage = handle_function
-  console.log('成功设置回调函数')
+  logger.info('成功设置回调函数')
 }

src/views/AddProxies.vue

@@ -89,10 +89,10 @@ n-input {
 <script setup>
 import { onMounted, ref } from 'vue'
 import store from '@/utils/stores/store'
-import { get, post } from '@/utils/request'
 import { sendErrorMessage } from '@/utils/message'
 import { sendErrorDialog, sendSuccessDialog } from '@/utils/dialog'
 import api from '@/api'
+import logger from '@/utils/logger'
 
 localStorage.setItem('ViewPage', 'add_proxy')
 // 选择框数据
@@ -230,6 +230,7 @@ async function randomPort() {
   try {
     rs = await api.v1.Proxies.GetRandomPort(proxyInfo.value.node)
   } catch (e) {
+    logger.error(e)
     sendErrorMessage('请求隧道端口失败: ' + e)
   }
   if (!rs) return
@@ -276,6 +277,7 @@ async function addProxy() {
       tunnelCreateInfo.sk
     )
   } catch (e) {
+    logger.error(e)
     sendErrorMessage(e)
     sendErrorDialog('添加失败，再试一次吧~')
   }
@@ -292,6 +294,7 @@ onMounted(async () => {
   try {
     rs = await api.v2.nodes.list()
   } catch (e) {
+    logger.error(e)
     sendErrorMessage('请求节点列表失败: ' + e)
   }
   if (!rs) return

src/views/Config.vue

@@ -57,6 +57,7 @@ import store from '@/utils/stores/store'
 import { sendSuccessMessage, sendErrorMessage } from '@/utils/message'
 import clipboard from '@/utils/clipboard'
 import api from '@/api'
+import logger from '@/utils/logger'
 
 const node = ref('')
 // 选择框数据
@@ -84,6 +85,7 @@ onMounted(async () => {
   try {
     rs = await api.v2.nodes.list()
   } catch (e) {
+    logger.error(e)
     sendErrorMessage('请求节点列表失败: ' + e)
   }
   if (!rs) return
@@ -114,14 +116,15 @@ async function updateValue(value) {
       value
     )
   } catch (e) {
+    logger.error(e)
     sendErrorMessage('请求获取隧道配置文件失败: ' + e)
   }
   if (!rs) return
   if (rs.data.status) {
-    sendSuccessMessage(rs.data.message)
+    sendSuccessMessage(rs.message)
     code.value = rs.data.config
   } else {
-    sendErrorMessage(rs.data.message)
+    sendErrorMessage(rs.message)
     code.value = '该节点下没有任何隧道捏~'
   }
 }