Vue SDK

El Casdoor Vue SDK está diseñado para Vue 2 y Vue 3, lo que lo hace muy conveniente de usar.

El Vue SDK se basa en casdoor-js-sdk. También puedes usar directamente el casdoor-js-sdk, lo que permitirá una mayor personalización.

Por favor, ten en cuenta que este plugin todavía está en desarrollo. Si tienes alguna pregunta o sugerencia, no dudes en contactarnos abriendo un issue.

Ahora te mostraremos los pasos necesarios a continuación.

Si todavía no estás seguro de cómo usarlo después de leer el README.md, puedes referirte al ejemplo: casdoor-python-vue-sdk-example para más detalles.

El front-end del ejemplo está construido con casdoor-vue-sdk, mientras que el back-end está construido con casdoor-python-sdk. Puedes ver el código fuente en el ejemplo.

Instalación

# NPM
npm install casdoor-vue-sdk

# Yarn
yarn add casdoor-vue-sdk

Inicializando el SDK

Para inicializar el SDK, necesitarás proporcionar 5 parámetros de cadena en el siguiente orden:

Nombre	Requerido	Descripción
serverUrl	Sí	La URL de tu servidor Casdoor.
clientId	Sí	El ID de Cliente de tu aplicación Casdoor.
appName	Sí	El nombre de tu aplicación Casdoor.
organizationName	Sí	El nombre de la organización Casdoor vinculada a tu aplicación Casdoor.
redirectPath	No	La ruta de la URL de redirección para tu aplicación Casdoor. Si no se proporciona, el valor predeterminado será /callback.

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

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

Ejemplo

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

Auto Fix

Si el hook postinstall no se activa o si has actualizado la versión de Vue, intenta ejecutar el siguiente comando para resolver el problema de redirección:

npx vue-demi-fix

Para más información sobre cómo cambiar de versión de Vue, por favor consulta los documentos de vue-demi.