跳到主内容

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文档。