Vue SDK

Das Casdoor Vue SDK ist für Vue 2 und Vue 3 konzipiert und macht die Verwendung sehr bequem.

Das Vue SDK basiert auf casdoor-js-sdk. Sie können auch direkt das casdoor-js-sdk verwenden, was mehr Anpassungsmöglichkeiten bietet.

Bitte beachten Sie, dass dieses Plugin noch in Entwicklung ist. Wenn Sie Fragen oder Vorschläge haben, können Sie uns gerne kontaktieren, indem Sie ein Issue öffnen.

Wir werden Ihnen nun die notwendigen Schritte unten zeigen.

Wenn Sie nach dem Lesen der README.md immer noch unsicher sind, wie es verwendet wird, können Sie sich das Beispiel ansehen: casdoor-python-vue-sdk-example für weitere Details.

Die Front-End des Beispiels ist mit casdoor-vue-sdk gebaut, während das Back-End mit casdoor-python-sdk gebaut ist. Sie können den Quellcode im Beispiel ansehen.

Installation

# NPM
npm install casdoor-vue-sdk

# Yarn
yarn add casdoor-vue-sdk

Initialisierung des SDK

Um das SDK zu initialisieren, müssen Sie 5 Zeichenkettenparameter in der folgenden Reihenfolge angeben:

Name	Erforderlich	Beschreibung
serverUrl	Ja	Die URL Ihres Casdoor-Servers.
clientId	Ja	Die Client-ID Ihrer Casdoor-Anwendung.
appName	Ja	Der Name Ihrer Casdoor-Anwendung.
organizationName	Ja	Der Name der Casdoor-Organisation, die mit Ihrer Casdoor-Anwendung verknüpft ist.
redirectPath	Nein	Der Pfad der Redirect-URL für Ihre Casdoor-Anwendung. Wenn nicht angegeben, wird standardmäßig /callback verwendet.

Für 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)

Für 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')

Beispiel

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

Auto Fix

Wenn der postinstall-Hook nicht ausgelöst wird oder wenn Sie die Vue-Version aktualisiert haben, versuchen Sie, den folgenden Befehl auszuführen, um das Weiterleitungsproblem zu beheben:

npx vue-demi-fix

Weitere Informationen zum Wechseln der Vue-Versionen finden Sie in den vue-demi Dokumenten.