Vue SDK

O Casdoor Vue SDK é projetado para Vue 2 e Vue 3, tornando-o muito conveniente de usar.

O Vue SDK é baseado no casdoor-js-sdk. Você também pode usar o casdoor-js-sdk diretamente, o que permitirá mais personalização.

Por favor, note que este plugin ainda está em desenvolvimento. Se você tiver alguma dúvida ou sugestão, sinta-se à vontade para nos contatar abrindo uma issue.

Agora vamos mostrar os passos necessários abaixo.

Se você ainda não tem certeza de como usá-lo após ler o README.md, você pode se referir ao exemplo: casdoor-python-vue-sdk-example para mais detalhes.

O front-end do exemplo é construído com casdoor-vue-sdk, enquanto o back-end é construído com casdoor-python-sdk. Você pode visualizar o código-fonte no exemplo.

Instalação

# NPM
npm install casdoor-vue-sdk

# Yarn
yarn add casdoor-vue-sdk

Inicializando o SDK

Para inicializar o SDK, você precisará fornecer 5 parâmetros de string na seguinte ordem:

Nome	Obrigatório	Descrição
serverUrl	Sim	A URL do seu servidor Casdoor.
clientId	Sim	O Client ID da sua aplicação Casdoor.
appName	Sim	O nome da sua aplicação Casdoor.
organizationName	Sim	O nome da organização Casdoor vinculada à sua aplicação Casdoor.
redirectPath	Não	O caminho da URL de redirecionamento para a sua aplicação Casdoor. Se não for fornecido, o padrão 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')

Exemplo

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

Auto Fix

Se o gancho postinstall não for acionado ou se você atualizou a versão do Vue, tente executar o seguinte comando para resolver o problema de redirecionamento:

npx vue-demi-fix

Para mais informações sobre a troca de versões do Vue, por favor, consulte a documentação do vue-demi.