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개의 문자열 매개변수를 제공해야 합니다:

이름	필수	설명
serverUrl	예	Casdoor 서버의 URL.
clientId	예	Casdoor 애플리케이션의 클라이언트 ID.
appName	예	Casdoor 애플리케이션의 이름.
organizationName	예	Casdoor 애플리케이션에 연결된 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 문서를 참조하십시오.