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	Так	URL вашого сервера Casdoor.
clientId	Так	Client ID вашого додатку Casdoor.
appName	Так	Назва вашого додатку Casdoor.
organizationName	Так	Назва організації Casdoor, пов'язаної з вашим додатком Casdoor.
redirectPath	Ні	Шлях URL-адреси перенаправлення для вашого додатку Casdoor. Якщо не надано, за замовчуванням буде /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 docs.