Vue 사용자 정의 지침을 기반으로 버튼 수준 권한 제어를 구현하는 방법

이 글에서는 주로 vue 사용자 정의 지침을 기반으로 한 버튼 수준 권한 제어 구현을 소개합니다. 관심 있는 친구들은 함께 배울 수 있습니다.

아이디어:

• 로그인: 사용자가 계정과 비밀번호를 입력한 후 올바른지 서버에 확인합니다. 확인이 통과되면 서버는 토큰을 받은 후 토큰을 반환합니다(이 토큰을 sessionStorage에 저장하여 사용자 로그인 상태는 페이지를 새로 고친 후에 기억될 수 있습니다) 프런트 엔드는 토큰을 기반으로 user_info 인터페이스를 가져와 사용자의 세부 정보(예: 사용자 권한, 사용자 이름 등)를 얻습니다.
  

• 권한 확인: 토큰을 통해 사용자에 해당하는 역할 획득, 지침 맞춤화, 라우팅 메타 속성에서 btnPermissions 획득 (참고: Meta.btnPermissions는 라우팅 테이블에 구성된 버튼 권한을 저장하는 배열입니다.) , 그런 다음 btnPermissions 배열에서 역할이 더 이상 존재하지 않는 경우 버튼 DOM을 삭제합니다.
  

버튼 권한도 v-if로 판단할 수 있는데, 페이지가 너무 많으면 각 페이지마다 라우팅 테이블에서 사용자 권한 역할과 Meta.btnPermissions을 얻어서 판단해야 한다는 느낌이 듭니다. 조금 번거롭습니다. 사용자 정의 지침의 경우 권한 버튼에 지침을 추가하면 됩니다.

이제 코드를 살펴보겠습니다...

라우팅 구성:

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

맞춤 지침:

import Vue from 'vue'
/**权限指令**/
const has = Vue.directive('has', {
 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 './public/js/btnPermissions.js';

페이지의 버튼에 v-has만 추가하면 됩니다

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

결론:

권한에는 프런트 엔드와 프런트 엔드의 조합이 필요합니다 제어하려면 기억하세요: 사용자 입력을 절대 믿지 마십시오!

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

Vue가 Redux를 사용하는 방법

Vue+mui를 사용하여 이미지의 로컬 캐싱을 구현하는 방법

Vue 라우팅 차단 및 페이지 점프 설정 방법 소개

위 내용은 Vue 사용자 정의 지침을 기반으로 버튼 수준 권한 제어를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!