Ruoyi はログイン ページをバイパスして他のカスタマイズされたページにアクセスし、カスタマイズされた公式アカウント ページにログインした後に権限を取得します。

 1. ホワイトリストルーティングパスの追加

2. ルーティングパスを設定する

component: (resolve) => require(['@/views/wxgzh/Login'], resolve),// 白名单

3. 公式アカウントにログインする場合、バックエンドから返されるトークン値を保存する必要があるため、カスタマイズした公式アカウントでログイン後、ユーザー情報を自動取得できます。

そうしないと、 permission.js ファイル内のrouter.beforeEach((to, from, next) => {...} がグローバル フロント ガードに従って判定されるたびに、ホワイトリスト インターフェイスがジャンプします。

(1) トークン値がない場合はデフォルトのログインページに戻ります。

(2) トークン値があれば、ユーザー情報が自動的に取得され、  store.dispatch('GetInfo').then(() => {...} が vuex ファイルsrc\store\modules\user にカプセル化されます。 js

import { setToken } from "@/utils/auth"; // トークン値インターフェイスにアクセスします

 setToken(response.token); // ホワイトリスト権限を持つアクセス トークン

wxLogin.vue ページのメインコードは次のとおりです。

import { setToken } from "@/utils/auth"; // 存取token值接口,在上面引用


// vant表单验证
      this.$refs.forms.validate().then(() => {
          // 验证通过
          login(this.form).then((response) => {
            if (response.code == 200) {
              setToken(response.token); // 存取token,有白名单权限
              localStorage.setItem("active", 0); // 存储vant标签切换值
              this.$router.push({ path: "/notice" }); // 跳转路由
            } else {
              this.finished = false;
            }
          });
        })
        .catch(() => {
          //验证失败
          console.log("false");
        });

 Permission.js ファイルは次のとおりです。グローバル フロント ガードは、ページがジャンプするたびにルートが存在するかどうかを判断します。

 システムによってカプセル化された vuex ファイルが src\store\modules\ user.jsの場合、ファイルは次のようになります。

パブリックアカウントが正常にログインすると、ユーザーの役割、ユーザーの権限などの情報が印刷および表示されます。