人的資源中部台湾プロジェクト (day10)

プログラミング 2023-07-12 07:33:00 訪問数: null

権限設計 - RBAC 権限設計のアイデア

まず、従来のパーミッション設計とは何なのかを理解しましょう

上の図から、従来の権限設計は各個人に個別の権限を設定することであることがわかりました。しかし、この方法は、全員が個別に権限を設定する必要があるため、現在の企業の権限の効率的な管理と制御という開発ニーズにはもはや適していません。

これに基づいて、RBAC (Role-Based Access control) の権限モデルが誕生しました。RBAC (Role-Based Access control)、つまりロールベースの権限割り当てソリューションですが、従来のソリューションと比較して、RBAC は中間層のロール (役割) とその権限モデルを提供します。次のように

RBAC は、ユーザーと権限ポイントの分離を実現します。ユーザーに権限を設定したい場合は、ユーザーに対応するロールを設定するだけでよく、そのロールには対応する権限が割り当てられます。これにより、権限の割り当てと設計が容易になります。これは最小限で効率的です。ユーザーから権限を取り消したい場合は、ロールを取り消すだけで済みます。次に、このアイデアをこのプロジェクトで実装します。

従業員の役割を割り当てる

目标従業員管理ページで役割を割り当てます

新しい役割の割り当てフォーム

前章では従業員管理のロール機能は実装していませんでしたが、本章では従業員へのロールの割り当てを実装します。

上図から、ユーザーとロール1对多の関係は、1 人のユーザーが複数のロールを持つことができることがわかります (たとえば、会社の会長は、部長やシステム管理者と同じロールを持つことができます)。

まず、新しい役割の割り当てフォームを作成しますemployees/components/assign-role.vue

<template> 
  <el-dialog title="役割の割り当て" :visible="showRoleDialog"> 
    <!-- el-checkbox-group は現在のユーザーが所有する役割を選択し、現在のユーザーが所有する役割にバインドする必要があります--> 
    < el-checkbox-group> 
      <!-- オプション --> 
    </el-checkbox-group> 
    <el-row slot="footer" type="flex" justify="center"> 
      <el-col :scan="6"> 
        <el-button type="primary" size="small">确定</el-button> 
        <el-button size="small">取消</el-button> 
      </el-col > 
    </el-row> 
  </el-dialog> 
</template> 
<script>

デフォルトのエクスポート { 
  props: { 
    showRoleDialog: {
      タイプ: ブール値、
      デフォルト: false 
    },
    // ユーザーの ID は、現在のユーザーのロール情報をクエリするために使用されます
    userId: {
      タイプ: 文字列、
      デフォルト: null 
    } 
  } 
} 
</script>

ロールと現在のユーザーロールのリストを取得する

すべての役割のリストを取得するassign-role.vue

  <!-- 割り当て角色 --> 
    <el-checkbox-group v-model="roleIds"> 
      <el-checkbox v-for="リスト内の項目" :key="item.id" :label="項目。 id"> 
        { 
  
  { 
          item.name 
        }} 
      </el-checkbox> 
    </el-checkbox-group>
  

役割リストを取得するassign-role.vue

import { getRoleList } from '@/api/setting'
エクスポート
デフォルト { 
  props: { 
    showRoleDialog: {
      タイプ: ブール値、
      デフォルト: false 
    }、
    userId: {
      タイプ: 文字列、
      デフォルト: null 
    } 
  }、
  data() { 
    return { 
      list: [], // ロールリスト
      roleIds: [] 
    } 
  }, 
  created() { 
    this.getRoleList() 
  }, 
  messages: { 
    // すべてのロールを取得
    async getRoleList() { 
      const { rows } = await getRoleList() 
      this .list = 行
    } 
  } 
}

ユーザーの現在のロールを取得しますassign-role.vue

import { getUserDetailById } from '@/api/user' 
async
 getUserDetailById(id) { 
      const { roleIds } = await getUserDetailById(id) 
      this.roleIds = roleIds // このユーザーのロールを割り当てます
  }

役割ポップアップレイヤーをクリックしますemployees/index.vue

import assignRole from './components/assign-role.vue' // コンポーネントをインポート
components
 : { 
    ..., 
    assignRole // コンポーネントを登録
  }, 
data
(){ 
    return { 
        userId:null // ユーザー ID 
    } 
}
<!-- ロール割り当てコンポーネントを配置します --> 
<assign-role ref="assignRole" :show-role-dialog.sync="showRoleDialog" :user-id="userId" />
// ロールを編集
async editRole(id) { 
    this.userId = id // 値を渡すプロパティは非同期です
    await this.$refs.assignRole.getUserDetailById(id) // 親コンポーネントが子コンポーネントのメソッドを呼び出す
    this.showRoleDialog = true 
}
<!-- ボタン呼び出し --> 
 <el-button type="text" size="small" @click="editRole(row.id)">役割</el-button>

従業員に役割を割り当てる

役割の割り当てインターフェイス api/employees.js

/** * 
 * ユーザーにロールを割り当てる
 * ***/ 
export function assignRoles(data) { 
  return request({ 
    url: '/sys/user/assignRoles', 
    data, 
    method: 'put' 
  }) 
}

保存してもOK assign-role.vue

import { assignRoles } から '@/api/employees'
   async btnOK() { 
      await assignRoles({ id: this.userId, roleIds: this.roleIds }) 
      this.$message.success('set fully') 
      // フォームを閉じる
      this.$emit('update:showRoleDialog', false) 
    },

キャンセルまたは閉じる assign-role.vue

btnCancel() { 
      this.roleIds = [] // 元の配列をクリア
      this.$emit('update:showRoleDialog', false) 
    }

コードを送信する

本节任务従業員に権限を割り当てる

権限ポイント管理ページの開発

目标: 権限ポイントページの開発と管理を完了します

新しい権限ポイント管理ページ

ユーザーはすでに役割を持っていますが、権限は何ですか

エンタープライズサービスでは、権限は一般的にページアクセス権限、ボタン操作権限、APIアクセス権限に分けられます。

API 権限はほとんどがバックエンドでインターセプトされるため、私たちのバージョンでは/页面访问のみを実行します。按钮操作授权

これにより、ビジネスニーズに応じて権限管理ページを設計できます。

完全な権限ページ構造 src/views/permission/index.vue

<template> 
  <div class="dashboard-container"> 
    <div class="app-container"> 
      <!-- 靠正しい按钮 --> 
      <page-tools> 
        <template v-slot:after> 
          <el- button type="primary" size="small">追加权限</el-button> 
        </template> 
      </page-tools> 
      <!-- 表格 --> 
      <el-table border> 
        <el-table-column align="center" label="名前" /> 
        <el-table-column align="center" label="标识" /> 
        <el -table-column align="center" label="描写" /> 
        <el-table-column align="center" label="操作"> 
          <テンプレート>  
            <el-button type="text"> 追加</el -ボタン>
            <el-button type="text">编辑</el -ボタン>
            <el-button type="text">删除</el-button> 
          </template> 
        </el-table-column> 
      </el-table>
 
    </div> 
  </div> 
</template>

カプセル化権限管理のリクエストの追加、削除、変更、確認 src/api/permisson.js

import request from '@/utils/request' 
//
権限を取得します
。export function getPermissionList(params) { 
  return request({ 
    url: '/sys/permission', 
    params 
  }) 
} 
// 新しい権限を追加します
。export function addPermission(data) { 
  return request({ 
    url: '/sys/permission', 
    method: 'post', 
    data 
  }) 
} 
//
更新権限
エクスポート関数 updatePermission(data) { 
  return request({ 
    url: `/sys/permission/${ data.id}`,
    メソッド: 'put', 
    data 
  }) 
} 
//
削除権限
エクスポート関数の削除 delPermission(id) {
  返却リクエスト({
    url: `/sys/permission/${id}`, 
    method: 'delete' 
  }) 
} 
// 権限の詳細を取得します
。export function getPermissionDetail(id) { 
  return request({ 
    url: `/sys/permission/${id} ` 
  }) 
}

権限データの取得とツリーの変換

ここではリストをツリー演算法により階層化します。

<script> 
import { getPermissionList } from '@/api/permission' 
import { tranListToTreeData } from '@/utils' 
export default { 
data() { 
    return { 
      list: [], 
      formData: { 
        name: '', // name 
        code: '', // 識別
        説明: '', // 説明
        タイプ: '', // タイプは、「追加」をクリックしたときにすでにわかっているため、表示する必要はありません。
        pid: '', // であるため、タイプは表示されません。ツリー enVisible 
        : '0' // open 
      }, 
      rules: { 
        name: [{ required: true, message: '権限名を空にすることはできません', トリガー: 'blur' }],
        コード: [ { 必須: true、メッセージ: '権限 ID を空にすることはできません'、トリガー:'ぼかし' }] 
      }, 
  }, 
      showDialog: false
    } 
  created() { 
    this.getPermissionList() 
  }、
  計算: { 
    showText() { 
      return this.formData.id ? '编辑' : '新增' 
    } 
  }、
  メソッド: { 
    async getPermissionList() { 
      this.list = tranListToTreeData(await getPermissionList(), '0') 
    } 
  } 
}
 
</script>

フォームデータをバインドする

  <el-table :data="list" border="" row-key="id"> 
          <el-table-column label="名前" prop="name" /> 
          <el-table-column label="标识" " prop="code" /> 
          <el-table-column label="描写" prop="description" /> 
          <el-table-column label="操作"> 
            <template slot-scope="{ row }"> 
              <el-button v-if="row.type === 1" type="text" @click="addPermission(row.id, 2)">追加</el-button> < 
              el-button type="テキスト" @click="editPermission(row.id)">编辑</el-button> 
              <el-button type="text" @click="delPermission(row.id)"> 删除</el-button> 
            </template> 
          </el-table-column > 
        </el-テーブル>

ツリー テーブルが必要な場合は、el-tableの行キー属性 ID を設定する必要があることに注意してください。

typeが1の場合はアクセス許可、typeが2の場合は機能許可

前のコンテンツと同様に、新規権限/削除権限/編集権限を完了する必要があります。

編集権限のあるポップアップレイヤーを追加しました

権限の追加/権限ポップアップレイヤーの編集

  <!-- 新しいノードを編集するためにポップアップ レイヤを配置します --> 
   <el-dialog :title="`${showText}Permission Point`" :visible="showDialog" @close="btnCancel"> <! - - 
      Form --> 
      <el-form ref="perForm" :model="formData" :rules="rules" label-width="120px"> <el-form-item label="権限名" prop="name " 
        > 
          <el-input v-model="formData.name" style="width:90%" /> 
        </el-form-item> 
        <el-form-item label="権限識別" prop="code" > 
          < el-input v-model="formData.code" style="width:90%" /> 
        </el-form-item> 
        <el-form-item label="权限描写"> 
          <el-input v-model="formData.description" style="width:90%" /> 
        < /el-form-item> 
        <el-form-item label="on">
          <el-switch 
            v-model="formData.enVisible" 
            active-value="1" 
            inactive-value="0" 
          /> 
        </el-form-item> 
      </el-form> 
      <el-row slot=" footer" type="flex" justify="center"> 
        <el-col :span="6"> 
          <el-button size="small" type="primary" @click="btnOK">确定</el- button> 
          <el-button size="small" @click="btnCancel">取消</el-button> 
        </el-col> 
      </el-row> 
    </el-dialog>

権限ポイントの追加、編集、削除

<template v-slot:after> 
     <el-button type="primary" size="small" @click="addPermission(0,1)"> 追加权制限</el-button> 
 </template>

ロジックの追加/削除/編集

import { updatePermission, addPermission, getPermissionDetail, delPermission, getPermissionList } from '@/api/permission'messages 
  : { 
     // 削除操作
    async delPermission(id) { 
      try { 
        await this.$confirm('本当にこれを削除しますか? data') 
        await delPermission(id) 
        this.getPermissionList() 
        this.$message.success('削除成功') 
      } catch (error) { 
        console.log(error) 
      } 
    }, 
    btnOK() { 
      this.$refs.perForm .validate( ).then(() => { 
        if (this.formData.id) { 
          return updatePermission(this.formData) 
        }  
        return addPermission(this.formData)
      }).then(() => { 
        // プロンプト メッセージ
        this.$message.success('追加に成功しました') 
        this.getPermissionList() 
        this.showDialog = false 
      }) 
    }, 
    btnCancel() { 
      this.formData = { 
        name: '', // name 
        code: '', / /識別の
        説明: '', // 説明の
        タイプ: '', // [追加] をクリックしたときにタイプがすでにわかっているため、タイプを表示する必要はありません
        pid: '', // 追加するノードをツリーが認識する必要があるためenVisibleの下
        : '0' // open 
      } 
      this.$refs.perForm.resetFields() 
      this.showDialog = false 
    }, 
    addPermission(pid, type) { 
      this.formData.pid = pid 
    },
    async editPermission(id) { 
      this.formData.タイプ = タイプ
      this.showDialog = true
      // ID に従って詳細を取得します
      this.formData = await getPermissionDetail(id) 
      this.showDialog = true 
    } 
  }

コードを送信する

本节任务: 権限ポイント管理ページの開発

ロールに権限を割り当てる

目标: ロールに権限を割り当てる作業を完了します。

権限を割り当てるためのポップアップ レイヤーを作成する

会社設定の章では権限を割り当てる機能を実装していなかったので、ここで実装しましょう。

権限をカプセル化して割り当てるための API src/api/setting.js

// ロールに権限を割り当てます
。export function assignPerm(data) { 
  return request({ 
    url: '/sys/role/assignPrem', 
    method: 'put', 
    data 
  }) 
}

ロールへの権限の割り当てポップアップ レイヤー

<el-dialog title="権限の割り当て" :visible="showPermDialog" @close="btnPermCancel"> <! -- 権限はツリー --> <!--
      データ
      をコンポーネントにバインド --> 
      < !-- check -strictly true の場合は親と子が関連付けられていないことを意味し、 false の場合は関連付けられていることを意味します --> <!-- id は一意の識別子として使用され
      ます--> 
      <el-tree 
        ref="permTree" 
        :data= "permData" 
        :props="defaultProps" 
        :show-checkbox="true" 
        :check-strictly="true" 
        :default-expand-all="true" 
        :default-checked-keys="selectCheck"
        ノードキー=" id" 
      /> 
      <!-- キャンセルしてもOK --> 
      <el-row slot="footer" type="flex" justify="center"> 
        <el-col :span="6">
          <el-button type="primary" size="small" @click="btnPermOK">确定</el-button> 
          <el-button size="small" @click="btnPermCancel">取消</el-button > 
        </el-col> 
      </el-row> 
    </el-dialog>

データを定義する

      showPermDialog: false, // 権限を割り当てるためのポップアップ レイヤーの表示を制御します。後者は、
      defaultProps: { 
        label: 'name' 
      }, 
       permData: [], // 権限データ ツリー データを受信するために特別に使用されます
      selectCheck: [], // 定義 選択されたノードを受け取る配列
      roleId: null // 割り当てられたロールの ID を記録するために使用されます

クリックして権限を割り当てます

<el-button size="small" type="success" @click="assignPerm(row.id)"> 割り当て制限</el-button>

ロールに権限を割り当てる

権限の割り当て/ツリー データ ( setting/index.vue)

import { ..., assignPerm } from '@/api/setting' 
import { transListToTreeData } from '@/utils' 
import { tranListToTreeData } from '@/api/ 
permission'messages: { 
    // クリックして権限を割り当てます
  // Get権限 クリックされたときに権限ポイント データを取得するためにポイント データが呼び出されます。
    async assignPerm(id) { 
      this.permData = tranListToTreeData(await getPermissionList(), '0') // リストをツリー データに変換します
      this.roleId = id 
      // する必要がありますこの ID のパーミッション ポイントを取得します
      。 // ID がある場合は、最初に ID を記録する必要があります。
      const { permIds } = await getRoleDetail(id) // permIds は、現在のロールが所有するパーミッション ポイント データです。
      this.selectCheck = permIds // 現在のロールが所有します 権限 ID の割り当て
      this.showPermDialog = true 
    }, 
    async btnPermOK() { 
      // el-tree のメソッドを呼び出します
      // console.log(this.$refs.permTree.getCheckedKeys()) 
      await assignPerm({ permIds: this.$refs.permTree.getCheckedKeys(), id: this.roleId }) 
      this.$message.success('Assign権限が成功しました') 
      this.showPermDialog = false 
    }, 
    btnPermCancel() { 
      this.selectCheck = [] // データをリセット
      this.showPermDialog = false 
    } 
}

コードを送信する

本节任务ロールに権限を割り当てる

おすすめ

転載: blog.csdn.net/szw2377132528/article/details/123977311
おすすめ
ランキング
Web側のオンラインクラウド編集ソリューション
2つのシナリオでのJVMチューニングケース（基本テンプレートの概要-G1）-ピット概要ハイライト21を踏む（週に1回更新）
Node Sass は現在の環境のバインディングを見つけることができませんでした
RabbitMQのコマンドラインの使用方法は、手動でキューrabbitmqadminを作成します
币圈韭菜十大致命操作（八）热爱幻想，无视现实
Wide Face+YOLOV7 顔検出
shrioの研究ノート
Eclipseは「：不明なMavenの設定の問題」を示します
6512. [3.18] GDOI2020シミュレーションツリーとパス
不像总结的总结
アーカイブ
もっと
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)

コードワールド

© 2018 codetd.com