rmqtt-http-api 0.23.1

This plugin provides HTTP APIs for integration with external systems, enabling operations like querying client information and publishing messages.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

/* ============================================================
   RMQTT Dashboard — 登录页（国际化）
   用户输入 http-api 的 Bearer Token
   ============================================================ */
window.LoginPage = Vue.defineComponent({
  name: 'LoginPage',
  template: `

    <div class="login-page">

      <div class="login-card">

        <h1>RMQTT</h1>

        <p>{{ $t('login.subtitle') }}</p>

        <div class="form-group">

          <label>{{ $t('login.title') }}</label>

          <div class="password-wrapper">

            <input class="form-input" :type="showToken ? 'text' : 'password'" v-model="token"

                   :placeholder="$t('login.token_placeholder')" @keyup.enter="login" />

            <button class="password-toggle" type="button" @click="showToken = !showToken"

                    :title="showToken ? $t('login.hide_token') : $t('login.show_token')">

              <span v-text="showToken ? '🙈' : '👁'"></span>

            </button>

          </div>

        </div>

        <div class="form-group" v-if="error" style="color:var(--red);font-size:13px;">

          {{ error }}

        </div>

        <button class="btn btn-primary" @click="login" :disabled="loading">

          {{ loading ? $t('login.verifying') : $t('login.submit') }}

        </button>

      </div>

    </div>

  `,
  setup() {
    const token = Vue.ref('');
    const showToken = Vue.ref(false);
    const loading = Vue.ref(false);
    const error = Vue.ref('');

    // $t 在 setup 中不可用，用 window.i18n.$t
    function $t(key, params) { return window.i18n.$t(key, params); }

    async function login() {
      if (!token.value.trim()) { error.value = $t('login.error_empty'); return; }
      loading.value = true;
      error.value = '';
      try {
        // 先保存 Token，再验证——确保验证请求携带 Authorization 头
        store.setToken(token.value.trim());
        const result = await http.get('/brokers');
        if (result) {
          location.hash = '#/';
        } else {
          // result 为 null 说明 http.js 捕获了 401 并清除了 Token
          throw new Error('Unauthorized');
        }
      } catch (e) {
        // 验证失败，清除无效 Token
        store.clearToken();
        error.value = $t('login.error_invalid');
      } finally {
        loading.value = false;
      }
    }

    return { token, showToken, loading, error, login };
  },
});