✅已解决 ｜ vue3 Guard组件如何退出登录

答疑解惑
#1

按照文档，
退出登录需要

import { initAuthClient } from "@authing/vue-ui-components";

import { getAuthClient } from "@authing/vue-ui-components";

但我的：

image
image929×276 15 KB 

initAuthClient undefined
getAuthClient undefined

登录是可以登录，请问使用Guard组件如何登出？

#2 
{

  "name": "demo",

  "version": "0.1.0",

  "private": true,

  "scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint"

  },

  "dependencies": {

    "@authing/vue-ui-components": "^3.0.0",

    "core-js": "^3.8.3",

    "vue": "^3.2.13"

  },

  "devDependencies": {

    "@babel/core": "^7.12.16",

    "@babel/eslint-parser": "^7.12.16",

    "@vue/cli-plugin-babel": "~5.0.0",

    "@vue/cli-plugin-eslint": "~5.0.0",

    "@vue/cli-service": "~5.0.0",

    "eslint": "^7.32.0",

    "eslint-plugin-vue": "^8.0.3"

  },

  "eslintConfig": {

    "root": true,

    "env": {

      "node": true

    },

    "extends": [

      "plugin:vue/vue3-essential",

      "eslint:recommended"

    ],

    "parserOptions": {

      "parser": "@babel/eslint-parser"

    },

    "rules": {}

  },

  "browserslist": [

    "> 1%",

    "last 2 versions",

    "not dead",

    "not ie 11"

  ]

}
#3

您好，我们现在不推荐使用 getAuthClient 的方法，因为您使用的话必须是保证 Guard 组件已经正常初始化的情况下使用。现在我们推荐在 onLoad 与 onLogin 事件回调之中 得到 AuthClient。

image
image1600×1270 201 KB

同时您可以关注一下最新的文档，老版本的文档我们维护的可能有些滞后。

感谢您的反馈我们也会及时的修改一下老文档的相关内容的。

#4

OK，谢谢工程师的指导

#5

我这边简单的写了一个 Demo 您按照这个思路去使用

<template>
  <Guard :appId="appId" @load="onLoad" @login="onLogin"/>
  <button v-if="guardAuthClient" @clink="onLogout">退出</button>
</template>

<script>
  import { Guard } from "@authing/vue-ui-components";
  import "@authing/vue-ui-components/lib/index.min.css";

  export default {
    components: {
      Guard,
    },
    data() {
      return {
        appId: "AUTHING_APP_ID",
        guardAuthClient: null
      };
    },
    methods: {
      onLoad: (authClient) => {
        this.guardAuthClient = authClient
      },
      onLogin: (user, authClient) => {
        this.guardAuthClient = authClient
      },
      onLogout: () => {
        this.guardAuthClient.logout()
      }
    }
  };
</script>
#6

Nice，太感谢了