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.