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	はい	CasdoorサーバーのURL。
clientId	はい	CasdoorアプリケーションのクライアントID。
appName	はい	Casdoorアプリケーションの名前。
organizationName	はい	CasdoorアプリケーションにリンクされたCasdoor組織の名前。
redirectPath	いいえ	CasdoorアプリケーションのリダイレクトURLのパス。提供されていない場合、デフォルトは`/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ドキュメントを参照してください。

インストール​

SDKの初期化​

例​

インストール

SDKの初期化

例