跳到主内容

Vue SDK

Casdoor Vue SDK 是专为Vue2 和 Vue3 设计的,很方便使用。

Vue SDK 基于 casdoor-js-sdk,您也可以直接使用 casdoor-js-sdk ,这将更易定制使用。

此插件仍在开发中,如果您有任何问题和建议,请联系我们 issue

我们将向您展示以下步骤。

如果在阅读README后您仍然不知道如何使用它, 您可以访问这个链接: casdoor-python-vue-sdk-example来获取更多信息。

示例的前端是用casdoor-vue-sdk构建的,后端是用casdoor-Python-sdk构建的,你可以看到源代码的例子。

安装

# NPM
npm i casdoor-vue-sdk

# Yarn
yarn add casdoor-vue-sdk

Init SDK

初始化需要 5 个参数,它们都是字符串类型:

名称(按顺序排列)必选项描述信息
服务器Url您的Casdoor服务器URL
客户端 Id:您Casdoor应用程序的客户端 ID
应用程序名称您的Casdoor应用程序的名称
组织名称与您的Casdoor应用程序相关联的Casdoor组织名称
重定向路径您的 Casdoor 应用程序的重定向URL 路径将是 /callback

install:

对于Vue3:

// 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)

对于Vue2:

// 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>

Auto Fix

如果 postinstall hook没有被触发,或者您更新了 Vue 版本, 尝试运行以下命令解决重定向问题。

npx vue-demi-fix

更多关于 Vue 版本开关的信息: vue-demi 文档