Vue のカスタム命令に基づいてボタンレベルの権限制御を実装する方法-jsチュートリアル-php.cn

Vue のカスタム命令に基づいてボタンレベルの権限制御を実装する方法

不言

リリース： 2018-07-04 11:03:59

オリジナル

2491 人が閲覧しました

この記事では主に、vue のカスタム命令に基づいたボタンレベルの権限制御の実装について詳しく紹介します。興味のある方は一緒に学習してください。

ログイン:ユーザーが入力したアカウントとパスワードが正しいかどうかをサーバーで検証します。検証に合格すると、サーバーはトークンを取得した後、トークンを返します (ユーザーがログインできるようにするために、このトークンを sessionStorage に保存します)。ページを更新した後にステータスを記憶できる)、フロントエンドはトークンに基づいて user_info インターフェイスをプルし、ユーザーの詳細情報 (ユーザー権限、ユーザー名など) を取得します。

権限の検証: トークンを介してユーザーに対応するロールを取得し、命令をカスタマイズし、ルーティングメタ属性の btnPermissions を取得します (注: meta.btnPermissions はボタンの権限を格納する配列であり、ルーティングテーブルで構成されます) 、 btnPermissions 配列にロールが存在するかどうかを判断し、ボタン DOM が存在しない場合は削除します。
ボタンの権限はv-ifでも判定できますが、ページ数が多すぎると各ページがルーティングテーブルのユーザー権限ロールとmeta.btnPermissionsを取得してから判断する必要がある感じですカスタム命令の場合は、許可ボタンに命令を追加するだけです。

話はもう十分なので、コードに移りましょう...

ルーティング設定:

path: &#39;/permission&#39;,
  component: Layout,
  name: &#39;权限测试&#39;,
  meta: { btnPermissions: [&#39;admin&#39;,&#39;supper&#39;,&#39;normal&#39;] }, //页面需要的权限
  children: [
   {
    path: &#39;supper&#39;,
    component: _import(&#39;system/supper&#39;),
    name: &#39;权限测试页&#39;,
    meta: { btnPermissions: [&#39;admin&#39;,&#39;supper&#39;] } //页面需要的权限
   },
   {
    path: &#39;normal&#39;,
    component: _import(&#39;system/normal&#39;),
    name: &#39;权限测试页&#39;,
    meta: { btnPermissions: [&#39;admin&#39;] } //页面需要的权限
   }
  ]

ログイン後にコピー

カスタム手順:

import Vue from &#39;vue&#39;
/**权限指令**/
const has = Vue.directive(&#39;has&#39;, {
 bind: function (el, binding, vnode) {
  // 获取按钮权限
  let btnPermissions = vnode.context.$route.meta.btnPermissions.split(",");
  if (!Vue.prototype.$_has(btnPermissions)) {
   el.parentNode.removeChild(el);
  }
 }
});
// 权限检查方法
Vue.prototype.$_has = function (value) {
 let isExist = false;
 let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
 if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
  return false;
 }
 if (value.indexOf(btnPermissionsStr) > -1) {
  isExist = true;
 }
 return isExist;
};
export {has}

ログイン後にコピー

次に、main.js でファイルインポートファイル

import has from &#39;./public/js/btnPermissions.js&#39;;

ログイン後にコピー

ページ上のボタンに v-has を追加するだけです

<el-button @click=&#39;editClick&#39; type="primary" v-has>编辑</el-button>

ログイン後にコピー

結論:

アクセス許可にはフロントエンドとアクセス許可の組み合わせが必要です制御するには、次のことを覚えておいてください。決してユーザー入力を信用しないでください。
以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。