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>

การแก้ไขอัตโนมัติ

หาก hook postinstall ไม่ถูกเรียกใช้หรือหากคุณได้อัปเดตเวอร์ชันของ Vue ลองใช้คำสั่งต่อไปนี้เพื่อแก้ไขปัญหาการเปลี่ยนเส้นทาง:

npx vue-demi-fix

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนเวอร์ชันของ Vue กรุณาดูที่ vue-demi docs

การติดตั้ง​

การเริ่มต้นใช้งาน SDK​

ตัวอย่าง​

การติดตั้ง

การเริ่มต้นใช้งาน SDK

ตัวอย่าง