バックグラウンド管理システムの権限ルーティングと権限メニューを実現する方法

素晴らしいレビュー

序文

この記事は、フロントエンドで多次元データ視覚化分析レポートを生成する方法の実際の戦闘に続く最後の記事です。主に、バックグラウンド管理システムの権限ルーティングと権限メニューの実装方法を紹介します。これら3つの記事のレビューと実際の戦闘を通じて、すべての人に許可してもらいたいと思います。エンタープライズアプリケーションを開発するときは、より快適です。

この記事に含まれる主な技術的ポイントは次のとおりです。

再帰的アルゴリズムを使用して、レベルが不定のメニューを動的にレンダリングする方法
権限に基づいてメニュー表示を制御する方法
nodejsに基づく許可サービスの設計

テキスト

動的なメニューと権限ルーティングは、バックエンド管理システムの設計に不可欠リンクされている複雑なバックエンド管理システムとして、ナビゲーションメニューは、多くの場合ではない、単純な最初のレベルのメニューであることが多い3レベルおよび4レベルのメニューがあり、次のように：。。私たちが最初にしているので、解決すべき問題は、未知のレベルのメニューに直面したときのフロントエンドソリューションです。2つ目は、さまざまな役割に直面し、さまざまな権限メニューを表示する必要があることです。これら2つの問題をどのように解決するかが、権限メニューを実現するための最初のステップです。次に、みんなで一緒にそれを達成するためにかかります。

再帰的アルゴリズムを使用して、レベルが不定のメニューを動的にレンダリングします

まず、最初の問題を解決して、不定レベルのメニューのレンダリングを実現しましょう。現在一般的に使用されているメニュースキーマは次のとおりです。

const menuData = [
  {
    key: '/manage',
    path: '/manage',
    text: 'dooring工作台',
  },
  {
    key: '/manage/anazly',
    path: '/manage/anazly',
    text: '数据大盘',
  },
  {
    key: '/manage/h5',
    text: 'H5服务中心',
    sub: [
      {
        key: '/manage/h5/config',
        path: '/manage/h5/config',
        text: 'H5页面管理',
      },
      {
        key: '/manage/h5/tpl',
        path: '/manage/h5/tpl',
        text: '模板库',
      }
    ]
  },
  {
    key: '/manage/order',
    path: '/manage/order',
    text: '订单管理',
  }
]

复制代码

このデータをトラバースして、for、recursionなどのjsアルゴリズムを実装することにより、動的メニューを生成できます。作成者は、recursionを使用してこれを実現します。メニューコンポーネントの選択に関しては、antdのメニュー、または要素UI、iViewなどを使用できます。原則は基本的に同じです。ここで、著者は私の再帰バージョンのjavascriptを直接記述します。

const { SubMenu } = Menu;
const createMenu = (menu = []) => {
    return menu.map(item => {
      if(item.sub) {
        return <SubMenu key={item.key} title={item.text}>
                  { createMenu(item.sub) }
               </SubMenu>
      }else {
        return <Menu.Item key={item.key}>
                   <Link to={item.path}>{ item.text }</Link>
                 </Menu.Item>
      }
    })
 }

复制代码

上記の方法で、任意のレベルメニューをレンダリングできます。H5ドアバックグラウンドでの効果は次のとおりです。許可要件がない場合は、上記のスキームを直接使用して任意の動的レベルメニューを実装できます。次に、許可を得て動的機能を実現します。メニュー。

権限に基づいてメニュー表示を制御する

上記の実装では、動的な階層メニューを実装しました。権限管理機能を備えたシステムの場合、スーパー管理者、通常の管理者、またはより詳細な部門など、ユーザーごとに異なるメニューを表示する必要があります。メニューをトラバースする必要があります。権限に従って動的にフィルタリングするときは、例を見てみましょう。スーパー管理者ログインのメニューインターフェイス：通常の管理者ログインのメニューインターフェイス：

まず、権限メニューを実装する場合は、メニュースキーマ構造を変更し、次のように権限フィールドを追加する必要があります。

const menuData = [
  {
    key: '/manage',
    path: '/manage',
    text: 'dooring工作台'
  },
  {
    key: '/manage/anazly',
    path: '/manage/anazly',
    text: '数据大盘',
  },
  {
    key: '/manage/auth',
    path: '/manage/auth',
    text: '会员管理',
    auth: true,
  },
  {
    key: '/manage/h5',
    text: 'H5服务中心',
    sub: [
      {
        key: '/manage/h5/config',
        path: '/manage/h5/config',
        text: 'H5页面管理',
      },
      {
        key: '/manage/h5/tpl',
        path: '/manage/h5/tpl',
        text: '模板库',
        auth: true,
      }
    ]
  }
]

复制代码

上の図は、認証フィールドを認証マークとして追加したことを示しています。ここでは2つの役割しかないため、ここでは主にtrueとfalseを使用して示しています。複数の権限がある場合は、特別な文字列または番号を使用して、このブロックの後にのみ必要であることを示すことができます。最終合意は良好です。具体的な実装は次のとおりです。

const createMenu = (menu = []) => {
    return menu.map(item => {
      if(item.sub) {
        return <SubMenu key={item.key} title={item.text}>
                  { createMenu(item.sub) }
               </SubMenu>
      }else {
        if((rp === 'super' && item.auth) || !item.auth) {
          return <Menu.Item key={item.key} icon={iconMap[item.icon]}>
                   <Link to={item.path}>{ item.text }</Link>
                 </Menu.Item>
        }else {
          return null
        }
      }
    })
  }

复制代码

以上がレベル無制限のダイナミックパーミッションメニューを実現しました。直接食べられます〜

nodejsに基づく許可サービスの設計

上記の実装は主にフロントエンドの設計ソリューションです。フロントエンドのセキュリティ対策は常に信頼性が低いことは誰もが知っています。したがって、システムのセキュリティを確保するために、通常、メニューデータをバックエンドに保存し、インターフェイスを介してアクセス許可メニューを動的に要求します。バックエンドと事前に合意して、ユーザーごとに異なるパーミッションメニュースキーマを返すことができます。スキームは比較的単純なので、ここでは1つずつ紹介しません。興味がある場合は、H5-Dooringを参照してください。成し遂げる。

それで、あなたは今日また知識がありますか？

やっと

上記のチュートリアルの作成者はH5-Dooringに統合されています。より複雑なインタラクティブ機能については、合理的な設計によって実現できます。自分で探索して学習することができます。

githubアドレス：H5エディターH5-ドア

H5ゲーム、webpack、node、gulp、css3、javascript、nodeJS、キャンバスデータの視覚化、その他のフロントエンドの知識と実際の戦闘について詳しく知りたい場合は、「興味深いフロントエンド」で一緒に勉強して話し合い、フロントエンドの境界を一緒に探索してください。

左下隅をクリックして元のテキストを読み、H5-Dooringに投票してください！