메인 콘텐츠로 건너뛰기

Vue SDK

Casdoor Vue SDK는 Vue 2와 Vue 3를 위해 설계되었으며, 사용하기 매우 편리합니다.

Vue SDK는 casdoor-js-sdk를 기반으로 합니다. 또한 casdoor-js-sdk를 직접 사용할 수도 있으며, 이를 통해 더 많은 사용자 정의가 가능합니다.

이 플러그인은 아직 개발 중이라는 점을 유의해 주세요. 질문이나 제안사항이 있으시면 issue를 열어 저희에게 연락해 주시기 바랍니다.

이제 필요한 단계를 아래에 보여드리겠습니다.

README.md를 읽고도 사용 방법을 잘 모르겠다면, 예제: casdoor-python-vue-sdk-example를 참조하시면 더 자세한 내용을 확인하실 수 있습니다.

예제의 프론트엔드는 casdoor-vue-sdk로 구축되었고, 백엔드는 casdoor-python-sdk로 구축되었습니다. 예제의 소스 코드를 확인하실 수 있습니다.

설치

# NPM
npm install casdoor-vue-sdk

# Yarn
yarn add casdoor-vue-sdk

SDK 초기화

SDK를 초기화하려면 다음 순서대로 5개의 문자열 매개변수를 제공해야 합니다:

이름필수설명
serverUrlCasdoor 서버의 URL.
clientIdCasdoor 애플리케이션의 클라이언트 ID.
appNameCasdoor 애플리케이션의 이름.
organizationNameCasdoor 애플리케이션에 연결된 Casdoor 조직의 이름.
redirectPath아니오Casdoor 애플리케이션의 리디렉트 URL 경로입니다. 제공되지 않으면 기본값은 /callback이 됩니다.

Vue 3 용:

// in main.js
import Casdoor from 'casdoor-vue-sdk'

const config = {
serverUrl: "http://localhost:8000",
clientId: "4262bea2b293539fe45e",
organizationName: "casbin",
appName: "app-casnode",
redirectPath: "/callback",
};

const app = createApp(App)
app.use(Casdoor, config)

Vue 2 용:

// in main.js
import Casdoor from 'casdoor-vue-sdk'
import VueCompositionAPI from '@vue/composition-api'

const config = {
serverUrl: "http://localhost:8000",
clientId: "4262bea2b293539fe45e",
organizationName: "casbin",
appName: "app-casnode",
redirectPath: "/callback",
};

Vue.use(VueCompositionAPI)
Vue.use(Casdoor, config)

new Vue({
render: h => h(App),
}).$mount('#app')

예시

// in app.vue
<script>
export default {
name: 'App',
methods: {
login() {
window.location.href = this.getSigninUrl();
},
signup() {
window.location.href = this.getSignupUrl();
}
}
}
</script>

자동 수정

postinstall 후크가 트리거되지 않거나 Vue 버전을 업데이트한 경우, 다음 명령을 실행하여 리디렉션 문제를 해결해 보세요:

npx vue-demi-fix

Vue 버전을 전환하는 방법에 대한 자세한 정보는 vue-demi 문서를 참조하십시오.