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>

自动修复

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

npx vue-demi-fix

关于Vue 版本的更多信息：请参见 vue-demi 文档