Vue SDK

تم تصميم Casdoor Vue SDK لـ Vue 2 و Vue 3، مما يجعل استخدامها مريحًا للغاية.

يعتمد Vue SDK على casdoor-js-sdk. يمكنك أيضًا استخدام casdoor-js-sdk مباشرةً، مما سيسمح بمزيد من التخصيص.

يرجى ملاحظة أن هذا الإضافة لا تزال قيد التطوير. إذا كان لديك أي أسئلة أو اقتراحات، فلا تتردد في الاتصال بنا عن طريق فتح مشكلة.

سنعرض لك الآن الخطوات اللازمة أدناه.

إذا كنت لا تزال غير متأكد من كيفية استخدامه بعد قراءة ملف 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	نعم	معرف العميل لتطبيق 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.