vue 인증 관리 및 세입 자 관리
기능 모듈 의 개발 은 왕왕 가장 쉽 지만,모든 세부 사항 을 잘 처리 하 는 것 은 쉽 지 않다.이곳 의 신분 인증 관리 모듈 을 보면 매우 간단 해 보인다.백 엔 드 인 터 페 이 스 는 모두 ABP 템 플 릿 에 이미 만들어 진 것 이기 때문에 전단 부분 은 화면 을 쓰 고 인 터 페 이 스 를 바 꾸 며 데 이 터 를 묶 는 것 이 아니다.하지만 ABP Angular 버 전의 코드 를 보면 세부 적 인 부분 이 많다 는 것 을 알 수 있다.
vue 로 돌아 갑 니 다.전단 부분 에 코드 파일 이 너무 많 기 때문에 주의해 야 할 세부 사항 만 보 여 줍 니 다.다른 vue 구성 요소,표,폼,데이터 바 인 딩,인터페이스 요청 등 은 거의 다 르 지 않 습 니 다.
단추 수준 권한
앞의 장 에서 메뉴 권한 에 대한 통 제 를 실 현 했 고 버튼 권한 의 이치 도 마찬가지다.abpConfig.auth.granted Policies 에 어떤 권한 이 포함 되 어 있 는 지 판단 하고 구성 요소 에 v-if 렌 더 링 을 사용 하면 됩 니 다.
src\utils\abp.js:
export function checkPermission(policy) {
const abpConfig = store.getters.abpConfig;
if (abpConfig.auth.grantedPolicies[policy]) {
return true;
} else {
return false;
}
}
src\views\identity\roles.vue:
<el-button
class="filter-item"
style="margin-left: 10px;"
type="primary"
icon="el-icon-edit"
@click="handleCreate"
v-if="checkPermission('AbpIdentity.Roles.Create')"
>
{{ $t("AbpIdentity['NewRole']") }}
</el-button>
인증 관리
역할 과 사용자 의 첨삭 검 사 는 말 하지 않 겠 습 니 다.권한 관리 에 주의해 야 합 니 다.사용자 와 역할 은 권한 관리 에 사용 되 어야 합 니 다.ABP Angular 버 전에 서 는 독립 된 permission-management 모듈 입 니 다.저도 그 를 공용 구성 요소 로 사용 합 니 다.providerName 에 따라'R'은 캐릭터 권한 이 고'U'는 사용자 권한 입 니 다.
R/U 권한
사용자 권한 은 캐릭터 권한 에서 나 올 수 있 기 때문에 사용자 의 권한 은 어떤 providerName 과 providerKey 에서 나 왔 는 지 표시 해 야 합 니 다.다른 provider 에서 나 오 면 disabled 이 므 로 수정 할 수 없습니다.
src\views\identity\components\permission-management.vue:
<el-form label-position="top">
<el-tabs tab-position="left">
<el-tab-pane
v-for="group in permissionData.groups"
:key="group.name"
:label="group.displayName"
>
<el-form-item :label="group.displayName">
<el-tree
ref="permissionTree"
:data="transformPermissionTree(group.permissions)"
:props="treeDefaultProps"
show-checkbox
check-strictly
node-key="name"
default-expand-all
/>
</el-form-item>
</el-tab-pane>
</el-tabs>
</el-form>
transformPermissionTree(permissions, name = null) {
let arr = [];
if (!permissions || !permissions.some(v => v.parentName == name))
return arr;
const parents = permissions.filter(v => v.parentName == name);
for (let i in parents) {
let label = '';
if (this.permissionsQuery.providerName == "R") {
label = parents[i].displayName;
} else if (this.permissionsQuery.providerName == "U") {
label =
parents[i].displayName +
" " +
parents[i].grantedProviders.map(provider => {
return `${provider.providerName}: ${provider.providerKey}`;
});
}
arr.push({
name: parents[i].name,
label,
disabled: this.isGrantedByOtherProviderName(
parents[i].grantedProviders
),
children: this.transformPermissionTree(permissions, parents[i].name)
});
}
return arr;
},
isGrantedByOtherProviderName(grantedProviders) {
if (grantedProviders.length) {
return (
grantedProviders.findIndex(
p => p.providerName !== this.permissionsQuery.providerName
) > -1
);
}
return false;
}
권한 새로 고침
수정 중인 권한 이 현재 사용자 에 게 영향 을 미 치면 어떻게 즉시 효력 이 발생 하 는 지 에 대한 세부 적 인 문제 도 있 습 니 다.
src\views\identity\components\permission-management.vue:
updatePermissions(this.permissionsQuery, { permissions: tempData }).then(
() => {
this.dialogPermissionFormVisible = false;
this.$notify({
title: this.$i18n.t("HelloAbp['Success']"),
message: this.$i18n.t("HelloAbp['SuccessMessage']"),
type: "success",
duration: 2000
});
fetchAppConfig(
this.permissionsQuery.providerKey,
this.permissionsQuery.providerName
);
}
);
src\utils\abp.js:
function shouldFetchAppConfig(providerKey, providerName) {
const currentUser = store.getters.abpConfig.currentUser;
if (providerName === "R")
return currentUser.roles.some(role => role === providerKey);
if (providerName === "U") return currentUser.id === providerKey;
return false;
}
export function fetchAppConfig(providerKey, providerName) {
if (shouldFetchAppConfig(providerKey, providerName)) {
store.dispatch("app/applicationConfiguration").then(abpConfig => {
resetRouter();
store.dispatch("user/setRoles", abpConfig.currentUser.roles);
const grantedPolicies = abpConfig.auth.grantedPolicies;
// generate accessible routes map based on grantedPolicies
store
.dispatch("permission/generateRoutes", grantedPolicies)
.then(accessRoutes => {
// dynamically add accessible routes
router.addRoutes(accessRoutes);
});
// reset visited views and cached views
//store.dispatch("tagsView/delAllViews", null, { root: true });
});
}
}
그리고 주의해 야 할 것 이 많 습 니 다.예 를 들 어 isStatic==true 의 캐릭터 는 삭제 할 수 없고 이름 을 수정 할 수 없습니다.추가 사용자 와 편집 사용자 의 암호 검사 규칙 은 차별 화 되 어야 합 니 다.저장 권한 은 차이 저장 입 니 다.잠깐 만...조건 이 있 으 면 ABP 의 Angular 코드 를 볼 수 있 습 니 다.
세입 자 관리
기본 기능 인터페이스 차이 가 많 지 않 습 니 다...그러나'관리 기능'옵션 이 있 습 니 다.기본 값 은'사용 가능 한 기능 이 없습니다'입 니 다.
이 기능 은 인터페이스 에 추가 할 곳 도 없고 삭제 할 곳 도 없 지만 상당히 실 용적 입 니 다.이 는 ABP 의 Feature Management 모듈 에서 나 온 것 으로'특징 관리'라 고도 부 르 는데 이 뒤에 다시 소개 한다.
세입 자 전환
세입 자 관리 가 완료 되면 로그 인 할 때 도 세입 자 를 전환 할 수 있 을 것 으로 보인다.
세입 자 전환 은 간단 합 니 다.입력 한 세입 자 이름 에 따라 세입 자 ID 를 가 져 온 다음/app/application-configuration 인 터 페 이 스 를 호출 하여 세입 자 ID 를 요청 Header 의 에 두 는 것 입 니 다.tenant 필드 에 있 으 면 됩 니 다.다음 요청 에 도 이 인자 가 필요 합 니 다.전달 하지 않 으 면 기본 숙주 단 입 니 다.
사실 ABP 백 엔 드 는 다 세대 사용 여 부 를 설정 할 수 있 습 니 다.백 엔 드 설정 에 따라 세입 자가 전환 하 는 단 추 를 표시 하거나 숨 길 수도 있 습 니 다.ABP 템 플 릿 에 비해 로그 인 인터페이스 에 등록 입구 가 하나 부족 합 니 다.뒤에 추가 하 세 요.
효과.
마지막.
전단 부분의 모듈 개발 은 더 이상 상세 하 게 소개 하지 않 겠 습 니 다.주 제 는 ABP 입 니 다.여기까지 진행 하면 ABP 템 플 릿 이 자체 적 으로 가지 고 있 는 전단 부분 기능 이 거의 완성 되 지 않 았 습 니 다.코드 가 필요 한 것 은 갈 수 있 습 니 다.https://github.com/xiajingren/HelloAbp 당기 고,뒤에 서 류 를 정리 해서 깨끗 한 vue 버 전 을 만 들 겠 습 니 다.
이상 은 vue 신분 인증 관리 와 세입 자 관리 에 대한 상세 한 내용 입 니 다.vue 신분 인증 관리 와 세입 자 관리 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 시기 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.