mq接入示例

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
+        "@stomp/stompjs": "^7.0.0",
         "@vueuse/core": "^10.7.2",
         "@vueuse/integrations": "^10.9.0",
         "@wangeditor/editor": "^5.1.23",
@@ -996,6 +997,11 @@
       "integrity": "sha512-RbhOOTCNoCrbfkRyoXODZp75MlpiHMgbE5MEBZAnnnLyQNgrigEj4p0lzsMDyc1zVsJDLrivB58tgg3emX0eEA==",
       "dev": true
     },
+    "node_modules/@stomp/stompjs": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/@stomp/stompjs/-/stompjs-7.0.0.tgz",
+      "integrity": "sha512-fGdq4wPDnSV/KyOsjq4P+zLc8MFWC3lMmP5FBgLWKPJTYcuCbAIrnRGjB7q2jHZdYCOD5vxLuFoKIYLy5/u8Pw=="
+    },
     "node_modules/@transloadit/prettier-bytes": {
       "version": "0.0.7",
       "resolved": "https://registry.npmmirror.com/@transloadit/prettier-bytes/-/prettier-bytes-0.0.7.tgz",
@@ -7159,6 +7165,11 @@
       "integrity": "sha512-RbhOOTCNoCrbfkRyoXODZp75MlpiHMgbE5MEBZAnnnLyQNgrigEj4p0lzsMDyc1zVsJDLrivB58tgg3emX0eEA==",
       "dev": true
     },
+    "@stomp/stompjs": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmmirror.com/@stomp/stompjs/-/stompjs-7.0.0.tgz",
+      "integrity": "sha512-fGdq4wPDnSV/KyOsjq4P+zLc8MFWC3lMmP5FBgLWKPJTYcuCbAIrnRGjB7q2jHZdYCOD5vxLuFoKIYLy5/u8Pw=="
+    },
     "@transloadit/prettier-bytes": {
       "version": "0.0.7",
       "resolved": "https://registry.npmmirror.com/@transloadit/prettier-bytes/-/prettier-bytes-0.0.7.tgz",

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@stomp/stompjs": "^7.0.0",
     "@vueuse/core": "^10.7.2",
     "@vueuse/integrations": "^10.9.0",
     "@wangeditor/editor": "^5.1.23",

src/router/guard.js

@@ -3,7 +3,7 @@ import NProgress from 'nprogress'
 import 'nprogress/nprogress.css'
 import { UserStore } from '@/store/user'
 
-const whiteList = ['/redirect', '/login', '/401', '/404', '/route/loading']
+const whiteList = ['/redirect', '/login', '/401', '/404', '/route/loading', '/test']
 NProgress.configure({ showSpinner: false }) // 进度条
 const dontRedirectList = ['/login', '/', '/401', '/404']
 const getRedirectUri = (route) => {

src/router/index.js

@@ -5,6 +5,11 @@ export const Layout = () => import('@/layout/index.vue')
 import i18n from '@/lang'
 // 静态路由
 export const constantRoutes = [
+  {
+    path: '/test',
+    component: () => import('@/views/test.vue'),
+    meta: { hidden: true }
+  },
   {
     path: '/route/loading',
     component: () => import('@/views/route-loading/index.vue'),

src/store/user.js

@@ -16,6 +16,7 @@ export const UserStore = defineStore('user', () => {
    */
   const logOut = () => {
     user.value = {}
+    menus.value = [];
     localStorage.removeItem('token')
   }
   const setMenus = (payload) => {

src/utils/stomp.js

@@ -0,0 +1,43 @@
+import { Client } from '@stomp/stompjs'
+import { isObject, get } from 'lodash-es'
+let client
+const options = {
+  brokerURL: 'ws://localhost:15674/ws',
+  connectHeaders: {
+    host: 'hxmsg',
+    login: 'huaxin',
+    passcode: '1234qwerasdf'
+  },
+  reconnectDelay: 5000,
+  heartbeatIncoming: 4000,
+  heartbeatOutgoing: 4000
+}
+/**
+ * 初始化stomp并订阅指定地址
+ * @param {Object} subscribes 订阅配置 {[url]:(msg)=>{}} key:订阅地址;value:回调函数
+ * @returns
+ */
+const initClient = (subscribes) => {
+  client = new Client(options)
+  client.onConnect = (res) => {
+    console.log('is connected')
+    if (!isObject(subscribes)) return
+    for (const url in subscribes) {
+      console.log(url)
+      const cb = subscribes[url]
+      client.subscribe(url, (msg) => {
+        let body = get(msg, 'body')
+        if (body) body = JSON.parse(body)
+        cb(body)
+      })
+    }
+  }
+  client.onStompError = (res) => {
+    console.log('connect error')
+    console.log(res)
+  }
+  client.activate()
+  return client
+}
+
+export { initClient }

src/views/route-loading/index.vue

@@ -14,6 +14,7 @@ const fullscreenLoading = ref(true)
 const router = useRouter()
 const route = useRoute()
 const userStore = UserStore()
+const user = computed(() => userStore.user)
 // 进了这个页面了.那就是重来注册一遍路由了
 const token = localStorage.getItem('token')
 onMounted(async () => {
@@ -23,6 +24,14 @@ onMounted(async () => {
     // 处理异常
     return
   }
+  const roles = get(user, 'value.role', [])
+  const isAdmin = roles.find((f) => f === 'Admin')
+  if (!isAdmin) {
+    //不是管理员,直接退出到登录界面
+    userStore.logOut()
+    window.location.href = `${import.meta.env.VITE_BASE_URL}/login`
+    return
+  }
   const menus = get(reqResult, 'menus')
   if (menus.length <= 0) {
     const nowRouteFullPath = router.currentRoute.value.fullPath

src/views/test.vue

@@ -0,0 +1,19 @@
+<template>
+  <div id="test">
+    <p>test</p>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { initClient } from '../utils/stomp'
+onMounted(() => {
+  const subs = {
+    '/exchange/systemEx/system': (data) => {
+      console.log(data)
+    }
+  }
+  const client = initClient(subs)
+})
+</script>
+<style scoped></style>