Vue SDK

Le Casdoor Vue SDK est conçu pour Vue 2 et Vue 3, ce qui le rend très pratique à utiliser.

Le SDK Vue est basé sur casdoor-js-sdk. Vous pouvez également utiliser directement le casdoor-js-sdk, ce qui permettra une plus grande personnalisation.

Veuillez noter que ce plugin est encore en développement. Si vous avez des questions ou des suggestions, n'hésitez pas à nous contacter en ouvrant une issue.

Nous allons maintenant vous montrer les étapes nécessaires ci-dessous.

Si vous n'êtes toujours pas sûr de comment l'utiliser après avoir lu le README.md, vous pouvez vous référer à l'exemple : casdoor-python-vue-sdk-example pour plus de détails.

L'interface frontale de l'exemple est construite avec casdoor-vue-sdk, tandis que le back-end est construit avec casdoor-python-sdk. Vous pouvez consulter le code source dans l'exemple.

Installation

# NPM
npm install casdoor-vue-sdk

# Yarn
yarn add casdoor-vue-sdk

Initialisation du SDK

Pour initialiser le SDK, vous devrez fournir 5 paramètres de type chaîne de caractères dans l'ordre suivant :

Nom	Requis	Description
serverUrl	Oui	L'URL de votre serveur Casdoor.
clientId	Oui	L'ID client de votre application Casdoor.
appName	Oui	Le nom de votre application Casdoor.
organizationName	Oui	Le nom de l'organisation Casdoor liée à votre application Casdoor.
redirectPath	Non	Le chemin de l'URL de redirection pour votre application Casdoor. Si non fourni, il utilisera par défaut /callback.

Pour 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)

Pour 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')

Exemple

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

Réparation automatique

Si le crochet postinstall ne se déclenche pas ou si vous avez mis à jour la version de Vue, essayez d'exécuter la commande suivante pour résoudre le problème de redirection :

npx vue-demi-fix

Pour plus d'informations sur le changement de versions de Vue, veuillez consulter la documentation de vue-demi.