Vueルーティング許可のアイデアの並べ替え（20220317）

コンテンツ

ルーティング許可制御

フロントエンドルートはすべてバックエンドから戻りますか、それともバックエンドは対応するロールの下でアクセス許可を返しますか？その後、フロントエンドは現在のルートをトラバースして変更しますか？

上記のこの質問に対する受け入れられた答えを引用します：

最初のタイプのバックグラウンドはルーティングを返し、2番目のタイプのバックグラウンドはパーミッション。
共通点：
どちらの方法でも要件を満たすことができます。
フロントエンドは、ルーティングアドレスとモジュールファイルアドレスの間のマッピングを維持する必要があります。後者のセグメントで返されるデータは、通常、二次処理のためにトラバースする必要があります。ページは個別に処理する必要があります。ポイントには、ルートガードとルート認証が含まれます

違い：

デフォルトルートリスト：方法1は、ホーム、ログイン、およびその他の不正なルートを維持し、その他のルートは、インターフェイスおよびルーティングAPIを介して動的に追加する必要があります：addRoutes;方法2は、それぞれを構成することにより、ルートを追加せずに完全なルートリストを維持する必要がありますrouteルートのアクセス配列は、認証に使用されます。
ルートジャンプ：最初の方法はユーザーの権限の下でルートを返すため、権限認証を実行する必要はありません。2番目の方法が必要です。
ルーティングのカスタマイズの程度：方法1はデータベースのルーティングデータを変更することでフロントエンドメニュー構造をカスタマイズできるため、スケーラビリティの高いルーティング再編成を実現するために再帰関数を作成する必要もあります。方法2を対象としています。メニュー構造が比較的安定しているプロジェクトでは、通常、構造の変更はサポートされていません。
返信メッセージ：一般的に、返信メッセージのサイズの方法1は方法2よりも大きくなります

補足要約：最初のタイプは動的ルーティングを指します。ルーティングは2つの部分に
分けられます。1つはホーム、ログイン、およびその他の非特権デマンドルーティングでの権限の下でバックエンドによって返されるルーティングです。端末アクセス可能なページを動的に生成するために、役割に応じてバックエンドからアクセス可能なルーティングテーブルを要求すると、router.addRoutesがルーターに動的にマウントされます。フロントエンドにはメニュー管理が必要であり、フロントエンドにはメニュー管理が必要です。ルーティングデータを変更することで、エンドメニューの構造をカスタマイズできます。拡張性が向上します。2つ目は、フロントエンドでルーティングテーブルを構成し、バックエンドはアクセス許可のみを返すことです。フロントエンドにはメニューアクセス許可管理が必要であり、ルートとメニューをロードするときにアクセス許可の検証が必要です。この方法は、メニュー構造が比較的安定しているプロジェクトで、通常は構造の変更をサポートしていません。

ボタンアクセス制御

ビューコントロール

権限に基づくボタン表示制御とインターフェースの変更：
方法1：v-if

方法2：カスタム命令

ユーザーのアクセス許可に基づいて各ボタンが表示されるかどうかを判断するのは、v-ifまたはカスタム命令にすぎません。また、v-ifの背後にあるアクセス許可検証ロジックがメソッドに抽象化されている限り、コードの量と形式の両方が使用法はカスタムと同じです手順はほとんど同じです
v-ifの特徴は、データの変更に応答することです。そのため、アプリケーションの実行時にアクセス許可の検証が頻繁にトリガーされ、アプリケーションのライフサイクル全体で1回だけアクセス許可を検証する必要があります。

カスタムディレクティブは引き続きグローバル検証メソッドを呼び出しますが、要素が初期化されるときに1回だけ実行されるという利点があります。ほとんどの場合、カスタムディレクティブを使用してビューコントロールを実装する必要があります。

したがって、カスタムディレクティブを使用することをお勧めします。

必ずしもすべてのアクションボタンがAJAXリクエストを開始するわけではありません。たとえば、編集ボタン自体がリクエストをトリガーするわけではありません。実際にリクエストをトリガーするのは、別の保存ボタンです。

フォーカス：
ボタンをリクエストに関連付けます。たとえば、ボタンにAという名前のリクエストが含まれている場合、許可命令は次のように記述できます。

<btn v-has="A" @click="Fn">按钮</btn>

ここでのAの実装にはさまざまな形式があります。たとえば、Aは次の2つのプロパティを含むオブジェクトにすることができます。

const A = {
  p: ['put,/menu/**'],
  r: params => {
    return axios.put(`/menu/${params.id}`, params)
  }
};

//用作权限：
<btn v-has="[A]" @click="Fn">按钮</btn>
//用作请求：
function Fn(){
    A.r().then((res) => {})
}

リクエストコントロール

axiosインターセプターを使用して実装され、目的はフロントエンドで不正なリクエストをインターセプトすることです。リクエストインターセプターでは、リクエストがインターセプトするかどうかを決定するユーザーの権限に準拠しているかどうかが判断されます。リクエストを開始する前に、リクエストを一元的にインターセプトします。このとき、リクエストの方法とリクエストのアドレスに応じて、権限を直接確認できます。

アクシオスを例にとると、インターセプターは次のようになります。

viデザインhttp://www.maiqicn.comOfficeResourcesWeb サイトDaquanhttps : //www.wode007.com

axios.interceptors.request.use(function (config) {
 if(!has(config)){
 //验证不通过
   return Promise.reject({
     message: `no permission`
   });
 }
 return config;
});