権限管理モジュールをロードする方法 (詳細なチュートリアル)

この記事では、権限管理モジュールで VUE コンポーネントを動的にロードする方法について詳しく説明します。この点に関するニーズがある人は、フォローして学ぶことができます。

この記事では主にログインとコンポーネントの動的読み込みについて説明します。

ログインステータスを保存する

ユーザーが正常にログインした後、現在のユーザーのログイン情報を後で使用できるようにローカルに保存する必要があります。具体的な実装は次のとおりです:

ログインに成功し、データを保存します

ログイン操作が正常に実行された後、データはコミット操作を通じてストアに送信されます。コアコードは次のとおりです:

this.postRequest('/login', {
  username: this.loginForm.username,
  password: this.loginForm.password
}).then(resp=> {
  if (resp && resp.status == 200) {
  var data = resp.data;
  _this.$store.commit('login', data.msg);
  var path = _this.$route.query.redirect;
  _this.$router.replace({path: path == '/' || path == undefined ? '/home' : path});
  }
});

store

ストアのコアコードは次のとおりです:

export default new Vuex.Store({
 state: {
  user: {
   name: window.localStorage.getItem('user' || '[]') == null ? '未登录' : JSON.parse(window.localStorage.getItem('user' || '[]')).name,
   userface: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).userface
  }
 },
 mutations: {
  login(state, user){
   state.user = user;
   window.localStorage.setItem('user', JSON.stringify(user));
  },
  logout(state){
   window.localStorage.removeItem('user');
  }
 }
});

トラブルを減らすために、ユーザーが正常にログインした後のデータはlocalStorageに保存されます(ユーザーがF5を押して更新した後のデータ損失を防ぐため)、文字列の形式で保存され、取得時に json に変換されます。ユーザーがログアウトすると、localStorage 内のデータが消去されます。

コンポーネントの動的読み込み

権限管理モジュールでは、これはフロントエンドのコアとみなされます。

中心的なアイデア

ユーザーがログインに成功した後、ホームページに入る前に、ユーザーは現在のメニュー情報とコンポーネント情報を取得するリクエストをサーバーに送信します。サーバーは現在のユーザーの役割と、ロールに対応するロールは、次の形式の json 文字列を返します:

[
  {
    "id": 2,
    "path": "/home",
    "component": "Home",
    "name": "员工资料",
    "iconCls": "fa fa-user-circle-o",
    "children": [
      {
        "id": null,
        "path": "/emp/basic",
        "component": "EmpBasic",
        "name": "基本资料",
        "iconCls": null,
        "children": [],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      },
      {
        "id": null,
        "path": "/emp/adv",
        "component": "EmpAdv",
        "name": "高级资料",
        "iconCls": null,
        "children": [],
        "meta": {
          "keepAlive": false,
          "requireAuth": true
        }
      }
    ],
    "meta": {
      "keepAlive": false,
      "requireAuth": true
    }
  }
]

この文字列を取得した後、フロントエンドは 2 つのことを行います: 1. json を現在のルートに動的に追加します。 2. データをストアに保存します。 、そして各ページはストア内のデータに基づいてメニューをレンダリングします。

中心となるアイデアは難しくありません。実装手順を見てみましょう。

データリクエストのタイミング

これは非常に重要です。

なぜこれがそんなに難しいのかと尋ねる友達もいるかもしれませんが、ログインに成功した後にリクエストすることはできないのでしょうか?はい、ログインに成功した後にメニュー リソースをリクエストすることは可能です。リクエストを受信すると、次回使用するためにストアに保存されますが、ユーザーが成功後に特定のサブ子をクリックすると、別の問題が発生します。ログインし、ページに入り、サブページに入り、F5 を押して更新します。この時点では、F5 を更新するとストア内のデータが失われ、ログイン時にメニュー リソースを 1 回要求しただけであるため、GG です。この問題を解決するには、次の 2 つの方法があります。 1. メニュー リソースをストアに保存せず、localStorage に保存して、F5 キーを更新した後でもデータが残るようにします。 2. マウントされたメソッドに直接保存します。各ページで、「メニュー リソースの読み込み」を 1 回実行します。

メニューのリソースは非常に機密性が高いため、ローカルに保存しないことが最善であるため、オプション 1 は放棄しました。ただし、オプション 2 は作業負荷が少し重いため、簡素化する手順を採用しました。ナビゲーションガードを使用します。

ルート ナビゲーション ガード

私の具体的な実装は次のようになります。まず、ストア内に空の配列であるルート配列を作成し、次に次のようにルート グローバル ガードを有効にします。

router.beforeEach((to, from, next)=> {
  if (to.name == 'Login') {
   next();
   return;
  }
  var name = store.state.user.name;
  if (name == '未登录') {
   if (to.meta.requireAuth || to.name == null) {
    next({path: '/', query: {redirect: to.path}})
   } else {
    next();
   }
  } else {
   initMenu(router, store);
   next();
  }
 }
)

ここでのコードは非常に短いです。 , やります 簡単な説明:

1. 行きたいページがログインページの場合は、何も言うことはありません。直接アクセスしてください。

2. ログイン ページでない場合は、まずストアから現在のログイン ステータスを取得し、ルート内のメタ属性の requireAuth 属性を使用して、アクセスしたいページにログインが必要かどうかを判断します。ログインが必要な場合は、ログイン ページに戻り、ログインが必要でない場合は、移動先のページのパスをパラメータとしてログイン ページに渡します。 、直接移動します (実際、このプロジェクトのログイン ページのみログインが必要ありません)。すでにログインしている場合は、最初にメニューを初期化してからジャンプします。

初期化メニューの操作は次のとおりです:

export const initMenu = (router, store)=> {
 if (store.state.routes.length > 0) {
  return;
 }
 getRequest("/config/sysmenu").then(resp=> {
  if (resp && resp.status == 200) {
   var fmtRoutes = formatRoutes(resp.data);
   router.addRoutes(fmtRoutes);
   store.commit('initMenu', fmtRoutes);
  }
 })
}
export const formatRoutes = (routes)=> {
 let fmRoutes = [];
 routes.forEach(router=> {
  let {
   path,
   component,
   name,
   meta,
   iconCls,
   children
  } = router;
  if (children && children instanceof Array) {
   children = formatRoutes(children);
  }
  let fmRouter = {
   path: path,
   component(resolve){
    if (component.startsWith("Home")) {
     require(['../components/' + component + '.vue'], resolve)
    } else if (component.startsWith("Emp")) {
     require(['../components/emp/' + component + '.vue'], resolve)
    } else if (component.startsWith("Per")) {
     require(['../components/personnel/' + component + '.vue'], resolve)
    } else if (component.startsWith("Sal")) {
     require(['../components/salary/' + component + '.vue'], resolve)
    } else if (component.startsWith("Sta")) {
     require(['../components/statistics/' + component + '.vue'], resolve)
    } else if (component.startsWith("Sys")) {
     require(['../components/system/' + component + '.vue'], resolve)
    }
   },
   name: name,
   iconCls: iconCls,
   meta: meta,
   children: children
  };
  fmRoutes.push(fmRouter);
 })
 return fmRoutes;
}

初期化メニューでは、まずストア内のデータが存在するかどうかを確認します。存在する場合、このジャンプはユーザーが F5 を押したわけではなく、通常のジャンプであることを意味します。またはアドレスバーに直接入力する 特定のアドレスから入力します。それ以外の場合は、読み込みメニューに進みます。メニューを取得したら、まず formatRoutes メソッドを使用して、サーバーから返された json をルーターが必要とする形式に変換します。サーバーから返されるコンポーネントは文字列ですが、ルーターで必要なものであるため、ここでは主にコンポーネントを変換します。はコンポーネントなので、必要なコンポーネントを formatRoutes メソッドで動的にロードするだけです。データ形式が正常に準備された後、一方ではデータがストアに保存され、他方では、ルーティングの addRoutes メソッドを使用してデータがルーティングに動的に追加されます。

メニューのレンダリング

最後に、ホームページで、ストアからメニュー json を取得し、それをメニューにレンダリングします。関連するコードは Home.vue で確認できますので、詳細は説明しません。

OK、これで、ログインに成功すると、異なるユーザーが異なるメニューを表示できるようになります。

上記は私があなたのためにまとめたものです。

関連記事:

vue.js で select の値を取得する方法 (詳細チュートリアル)

Vue2.0 シリーズでフィルターを使用するには?

vue プロジェクトの tween メソッドを使用して先頭に戻る方法

vue を使用して入力コンテンツがすべてスペースであることを確認するにはどうすればよいですか?

js を使用して、入力ボックスにスペースや null 値を使用できないことを確認するにはどうすればよいですか?

以上が権限管理モジュールをロードする方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。