跳到主内容

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个字符串参数:

名称必需的描述信息
服务器Url您的Casdoor服务器的URL。
客户端 Id:您的Casdoor应用程序的客户端ID。
应用程序名称您的Casdoor应用程序的名称。
组织名称与您的Casdoor应用程序关联的Casdoor组织的名称。
重定向路径您的Casdoor应用程序的重定向URL路径。 如果未提供,它将默认为/callback

对于 Vue 3:

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

// 在 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文档