VueJS 응용 프로그램 에서 사용자 권한 관리

인증 이 필요 한 전단 응용 프로그램 에서 저 희 는 사용자 역할 을 통 해 어떤 내용 을 볼 수 있 는 지 결정 하고 싶 습 니 다.예 를 들 어 관광객 신분 으로 글 을 읽 을 수 있 지만 가입 사용자 나 관리자 가 편집 단 추 를 볼 수 있다.
전단 에서 관리 권한 이 좀 번 거 로 울 수 있 습 니 다.당신 은 이전에 이런 코드 를 쓴 적 이 있 을 것 입 니 다.

if (user.type === ADMIN || user.auth && post.owner === user.id ) {
 ...
}

대체 방안 으로 간결 하고 가 벼 운 라 이브 러 리 인 CASL 은 사용자 권한 을 관리 하 는 것 을 매우 간단하게 할 수 있다.CASL 로 권한 을 정의 하고 현재 사용 자 를 설정 하면 위의 코드 를 이렇게 바 꿀 수 있 습 니 다.

if (abilities.can('update', 'Post')) {
 ...
}

이 글 에 서 는 전단 애플 리 케 이 션 에서 Vue.js 와 CASL 을 사용 하여 권한 을 관리 하 는 방법 을 보 여 드 리 겠 습 니 다.

CASL 속성 과정
CASL 은 사용자 가 볼 수 있 는 자원 을 제한 하 는 일련의 규칙 을 정의 할 수 있 습 니 다.
예 를 들 어 CASL 규칙 은 사용자 가 주어진 자원 과 인 스 턴 스(댓 글,글,댓 글 등)에 대해 어떤 CRUD(Create,Read,Update,Delete)작업 을 할 수 있 는 지 표시 할 수 있다.
우리 가 분류 광고 사이트 가 있다 고 가정 해 봐.가장 눈 에 띄 는 규칙 은:
관광객 들 은 모든 게시 물 을 조회 할 수 있다.
관리 자 는 모든 댓 글 을 조회 할 수 있 고 업데이트 하거나 삭제 할 수 있 습 니 다.
CASL 을 사용 하면 Ability Builder 로 규칙 을 정의 합 니 다.새로운 규칙 을 정의 하기 위해 can 을 호출 합 니 다.예 를 들 면:

onst { AbilityBuilder } = require('casl');

export function(type) {
 AbilityBuilder.define(can => {
  switch(type) {
   case 'guest':
    can('read', 'Post');
    break;
   case 'admin':
    can('read', 'Post');
    can(['update', 'delete'], 'Post');
    break;
   // Add more roles here
  }
 }
};

이제 정 의 된 규칙 으로 응용 권한 을 검사 할 수 있 습 니 다.

import defineAbilitiesFor from './abilities';

let currentUser = {
 id: 999,
 name: "Julie"
 type: "registered",
};

let abilities = defineAbilitiesFor(currentUser.type);

Vue.component({
 template: `<div><div>
       <div>Please log in</div>
      `,
 props: [ 'post' ],
 computed: {
  showPost() {
   return abilities.can('read', 'Post');
  }
 }
});

데모 과정
프 리 젠 테 이 션 으로 광고 게시 물 을 분류 하 는 서버/클 라 이언 트 애플 리 케 이 션 을 만 들 었 습 니 다.이 앱 의 규칙 은 사용자 가 댓 글 이나 댓 글 을 읽 을 수 있 지만 자신의 댓 글 을 업데이트 하거나 삭제 할 수 밖 에 없다 는 것 이다.
저 는 Vue.js 와 CASL 로 이 규칙 들 을 편리 하 게 실행 하고 확장 합 니 다.나중에 새로운 조작 이나 인 스 턴 스 를 추가 하 더 라 도 편리 할 것 입 니 다.
지금 나 는 너 를 데 리 고 이 응용 프로그램 을 한 걸음 한 걸음 구축 할 것 이다.보고 싶다 면 이 Github repo 를 찍 어 주세요.
사용자 권한 정의
저 희 는 resources/ability.js 에서 사용자 권한 을 정의 합 니 다.CASL 의 장점 중 하 나 는 환경 과 무관 하 다 는 것 이다.즉,Node 에서 도 실행 할 수 있 고 브 라 우 저 에서 도 실행 할 수 있다 는 것 이다.
Node 의 호환성 을 확보 하기 위해 CommonJS 모듈 에 권한 정 의 를 쓸 것 입 니 다.(Webpack 은 이 모듈 을 클 라 이언 트 에 사용 할 수 있 습 니 다.)
resources/ability.js

const casl = require('casl');

module.exports = function defineAbilitiesFor(user) {
 return casl.AbilityBuilder.define(
  { subjectName: item => item.type },
  can => {
   can(['read', 'create'], 'Post');
   can(['update', 'delete'], 'Post', { user: user });
  }
 );
};

다음은 이 코드 를 분석 하 겠 습 니 다.
define 방법의 두 번 째 매개 변 수 는 can 을 호출 하여 권한 규칙 을 정의 합 니 다.이 방법의 첫 번 째 매개 변 수 는 CRUD 작업 을 허용 하 는 것 이 고,두 번 째 는 자원 이나 인 스 턴 스 입 니 다.이 예 에서 Post 입 니 다.
두 번 째 can 의 호출 에 주의 하 십시오.우 리 는 대상 을 세 번 째 매개 변수 로 전 했 습 니 다.이 대상 은 user 속성 이 우리 가 제공 하 는 user 대상 과 일치 하 는 지 테스트 하 는 데 사 용 됩 니 다.만약 우리 가 이렇게 하지 않 는 다 면,그것 은 창조 자 뿐만 아니 라,누구 라 도 마음대로 삭제 할 수 있다.
resources/ability.js

...
casl.AbilityBuilder.define(
 ...
 can => {
  can(['read', 'create'], 'Post');
  can(['update', 'delete'], 'Post', { user: user });
 }
);

CASL 이 인 스 턴 스 를 검사 하여 권한 을 할당 할 때 인 스 턴 스 의 type 을 알 아야 합 니 다.하나의 해결 방법 은 subject Name 방법 을 가 진 대상 을 define 방법의 첫 번 째 매개 변수 로 서 subject Name 방법 은 인 스 턴 스 의 유형 을 되 돌려 줍 니 다.
우 리 는 인 스 턴 스 에서 type 을 되 돌려 목적 을 달성 합 니 다.우 리 는 Post 대상 을 정의 할 때 이 속성 이 존재 한 다 는 것 을 보증 해 야 한다.
resources/ability.js

...
casl.AbilityBuilder.define(
 { subjectName: item => item.type },
 ...
);

마지막 으로,우 리 는 우리 의 권한 정 의 를 하나의 함수 에 봉인 합 니 다.그러면 우 리 는 테스트 권한 이 필요 할 때 user 대상 에 직접 전달 할 수 있 습 니 다.아래 의 함수 에서 더욱 이해 하기 쉬 울 것 이다.
resources/ability.js

const casl = require('casl');

module.exports = function defineAbilitiesFor(user) {
 ...
};

Vue 의 접근 권한 규칙
현재 저 희 는 전단 응용 프로그램 에서 사용자 가 어떤 CRUD 권한 을 가지 고 있 는 지 확인 하고 싶 습 니 다.Vue 구성 요소 에서 CASL 규칙 에 접근 해 야 합 니 다.이것 은 방법 이다.
Vue 와 abilities plugin 을 도입 합 니 다.이 플러그 인 은 CASL 을 Vue 의 원형 에 추가 합 니 다.그러면 우 리 는 구성 요소 에서 호출 할 수 있 습 니 다.
Vue 응용 프로그램 에 우리 의 규칙 을 도입 합 니 다(예:resources/abilities.js).
현재 사용 자 를 정의 합 니 다.실전 에서 저 희 는 서버 를 통 해 사용자 데 이 터 를 얻 었 습 니 다.이 예 에서 저 희 는 프로젝트 에 간단하게 하 드 인 코딩 을 했 습 니 다.
명심 하 세 요.abilities 모듈 export 함 수 를 define Abilities For 라 고 부 릅 니 다.우 리 는 이 함수 에 사용자 대상 을 전송 할 것 이다.지금 은 언제든지 대상 을 검사 함으로써 현재 사용자 가 어떤 권한 을 가지 고 있 는 지 알 수 있 습 니 다.
abilities 플러그 인 을 추가 하면 구성 요소 에서 이렇게 테스트 할 수 있 습 니 다:this.$can(...).
src/main.js

import Vue from 'vue';
import abilitiesPlugin from './ability-plugin';

const defineAbilitiesFor = require('../resources/ability');
let user = { id: 1, name: 'George' };
let ability = defineAbilitiesFor(user.id);
Vue.use(abilitiesPlugin, ability);

포스트 인 스 턴 스
저희 앱 은 분류 광고 게시 물 을 사용 합 니 다.이 게시 물 을 표현 하 는 대상 은 데이터베이스 에서 검색 한 후 서버 에 의 해 전단 으로 전송 된다.예 를 들 면:
우리 의 Post 인 스 턴 스 에는 두 가지 속성 이 필요 합 니 다.
type 속성.CASL 은 테스트 중인 인 스 턴 스 가 어떤 인 스 턴 스 인지 abilities.js 의 subject Name 리 셋 을 사용 합 니 다.
user 속성.이것 은 게시 자 입 니 다.사용 자 는 게시 물 을 업데이트 하고 삭제 할 수 밖 에 없다 는 것 을 기억 하 라.main.js 에서 저 희 는 define Abilities For(user.id)를 통 해 CASL 현재 사용자 가 누구 인지 알려 주 었 습 니 다.CASL 이 해 야 할 일 은 사용자 의 ID 와 user 속성 이 일치 하 는 지 확인 하 는 것 입 니 다.

let posts = [
 {
  type: 'Post',
  user: 1,
  content: '1 used cat, good condition'
 },
 {
  type: 'Post',
  user: 2,
  content: 'Second-hand bathroom wallpaper'
 }
];

두 포스트 대상 중 ID 가 1 인 George 는 첫 번 째 게시 물의 업데이트 삭제 권한 이 있 지만 두 번 째 게시 물 은 없다.
대상 에서 사용자 권한 테스트
게시 물 은 Post 구성 요 소 를 통 해 응용 프로그램 에서 보 여 줍 니 다.먼저 코드 를 보 세 요.다음은 제 가 설명 하 겠 습 니 다.
src/components/Post.vue

<template>
 <div>
  <div>

   <br /><small>posted by </small>
  </div>
  <button @click="del">Delete</button>
 </div>
</template>
<script> import axios from 'axios';

 export default {
  props: ['post', 'username'],
  methods: {
   del() {
    if (this.$can('delete', this.post)) {
     ...
    } else {
     this.$emit('err', 'Only the owner of a post can delete it!');
    }
   }
  }
 } </script>
<style lang="scss">...</style>

Delete 단 추 를 누 르 면 이 벤트 를 누 르 면 del 처리 함 수 를 호출 합 니 다.
저 희 는 this.$can('delete',post)을 통 해 CASL 을 사용 하여 현재 사용자 가 조작 권한 이 있 는 지 확인 합 니 다.권한 이 있 으 면 더 조작 하고 없 으 면 오류 알림 을 줍 니 다."게시 자만 삭제 할 수 있 습 니 다!"
서버 측 테스트
실제 항목 에서 사용자 가 전단 에서 삭제 한 후에 저 희 는 Ajax 를 통 해 인터페이스 에 삭제 명령 을 보 냅 니 다.예 를 들 어:
src/components/Post.vue

if (this.$can('delete', post)) {
 axios.get(`/delete/${post.id}`, ).then(res => {
  ...
 });
}

서버 는 클 라 이언 트 의 CRUD 작업 을 신뢰 해 서 는 안 됩 니 다.그러면 우 리 는 CASL 테스트 논 리 를 서버 에 넣 습 니 다.
server.js

app.get("/delete/:id", (req, res) => {
 let postId = parseInt(req.params.id);
 let post = posts.find(post => post.id === postId);
 if (ability.can('delete', post)) {
  posts = posts.filter(cur => cur !== post);
  res.json({ success: true });
 } else {
  res.json({ success: false });
 }
});

CASL 은 같은 구성(isomorphic)입 니 다.서버 의 ability 대상 은 abilities.js 에서 도입 할 수 있 습 니 다.그러면 우 리 는 어떠한 코드 도 복사 할 필요 가 없습니다!
포장 하 다
이 때 간단 한 Vue 응용 프로그램 에서 저 희 는 사용자 권한 을 관리 하 는 좋 은 방법 이 있 습 니 다.
나 는 this.$can('delete',post)이 아래 보다 훨씬 우아 하 다 고 생각한다.

if (user.id === post.user && post.type === 'Post') {
 ...
}