实现auth0时vuejs令牌错误

Question

我对vuejs很陌生，并实现了这个示例：

Auth0 vuejs和api示例

它工作得很好，但是当我试图将vuejs代码合并到我自己的项目时，我遇到了一些问题。

当加载需要身份验证的页面时，我会得到以下错误：

index.vue?4db4:11 Uncaught (承诺) TypeError:无法对“Object(.)(.)”的属性“getAccessTokenSilently”进行重构因为它是没有定义的。

我页面的代码如下所示：

<script>
import Layout from "../../../layouts/main.vue";
import { getProtectedResource } from "@/services/message.service";
import { ref } from "vue";

import { useAuth0 } from "@auth0/auth0-vue";

const message = ref("");

const getMessage = async () => {
  const { getAccessTokenSilently } = useAuth0();
  const accessToken = await getAccessTokenSilently();
  const { data, error } = await getProtectedResource(accessToken);

  if (data) {
    message.value = JSON.stringify(data, null, 2);
  }

  if (error) {
    message.value = JSON.stringify(error, null, 2);
  }
};

getMessage();

export default {
  components: {
    Layout
  },
  data() {
    return {
    
    };
  },
  methods: {
    rightcolumn() {
      if (document.querySelector('.layout-rightside-col').classList.contains('d-none')) 
{
      document.querySelector('.layout-rightside-col').classList.remove('d-none')
      } else {
      document.querySelector('.layout-rightside-col').classList.add('d-none')
      }
    }
  }

};
</script>

<template>
<Layout>
  <p id="page-description">
        <span
          >This page retrieves a <strong>protected message</strong> from an
          external API.</span
        >
        <span
          ><strong
            >Only authenticated users can access this page.</strong
          ></span
        >
      </p>
      <CodeSnippet title="Protected Message" :code="message" />
</Layout>
</template>

我从这里提供的文档中尝试了这个例子-- 在这里输入链接描述

<script>
  import Layout from "../../../layouts/main.vue";
  //import { getProtectedResource } from "@/services/message.service";
  //import { ref } from "vue";

  import { useAuth0 } from "@auth0/auth0-vue";

  export default {
    setup() {
      const { loginWithRedirect } = useAuth0();

      return {
        login: () => {
          loginWithRedirect();
        }
      };
    },
    components: {
      Layout
    },
    data() {
      return {
       
      };
    },
    methods: {
      rightcolumn() {
        if (document.querySelector('.layout-rightside-col').classList.contains('d-none')) {
          document.querySelector('.layout-rightside-col').classList.remove('d-none')
        } else {
          document.querySelector('.layout-rightside-col').classList.add('d-none')
        }
      }
    }
}

</script>

但仍然会收到以下错误：

index.vue?4db4:11 Uncaught (承诺) TypeError:无法对“Object(.)(.)”的属性“loginWithRedirect”进行重构因为它是没有定义的。安装程序(index.vue?4db4:11:1)

我正在以这种方式注册插件：

createApp(App)
    .use(store)
    .use(router)
    .use(VueApexCharts)
    .use(BootstrapVue3)
    .component(VueFeather.type, VueFeather)
    .use(Maska)
    .use(Particles)
    .use(i18n)
    .use(
        createAuth0({
          domain: 'xyz.auth0.com',
          client_id: 'secret',
          redirect_uri: 'http://localhost:4040/callback',
          audience: 'https://audience',
        })
      )
    .use(vClickOutside).mount('#app');

我的package.json文件：

{
  "name": "vuejs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@auth0/auth0-vue": "^1.0.2",
    "@ckeditor/ckeditor5-build-classic": "^32.0.0",
    "@ckeditor/ckeditor5-vue": "^2.0.1",
    "@fullcalendar/bootstrap": "^5.10.1",
    "@fullcalendar/core": "^5.10.1",
    "@fullcalendar/daygrid": "^5.10.1",
    "@fullcalendar/interaction": "^5.10.1",
    "@fullcalendar/list": "^5.10.1",
    "@fullcalendar/timegrid": "^5.10.1",
    "@fullcalendar/vue3": "^5.10.1",
    "@j-t-mcc/vue3-chartjs": "^1.2.0",
    "@popperjs/core": "^2.11.2",
    "@simonwep/pickr": "^1.8.2",
    "@vue-leaflet/vue-leaflet": "^0.6.1",
    "@vueform/multiselect": "^2.3.1",
    "@vueform/slider": "^2.0.8",
    "@vueform/toggle": "^2.0.1",
    "@vuelidate/core": "^2.0.0-alpha.34",
    "@vuelidate/validators": "^2.0.0-alpha.26",
    "@zhuowenli/vue-feather-icons": "^5.0.2",
    "aos": "^2.3.4",
    "apexcharts": "^3.33.0",
    "axios": "^0.27.2",
    "bootstrap": "^5.2.1",
    "bootstrap-vue-3": "^0.3.3",
    "chart.js": "^3.7.0",
    "click-outside-vue3": "^4.0.1",
    "core-js": "^3.6.5",
    "echarts": "^5.3.0",
    "feather-icons": "^4.28.0",
    "firebase": "^9.6.6",
    "highlight.js": "^11.4.0",
    "leaflet": "^1.7.1",
    "lottie-web": "^5.8.1",
    "maska": "^1.5.0",
    "moment": "^2.29.1",
    "node-sass": "6.0.1",
    "particles.vue3": "^1.40.2",
    "prismjs": "^1.26.0",
    "sass-loader": "^10.2.1",
    "simplebar": "^5.3.6",
    "simplebar-vue3": "^0.1.5",
    "sweetalert2": "^11.4.32",
    "swiper": "^6.8.4",
    "vue": "3.2.36",
    "vue-router": "^4.0.15",
    "vue-draggable-next": "^2.1.1",
    "vue-easy-lightbox": "^1.3.0",
    "vue-feather": "^2.0.0",
    "vue-flatpickr-component": "^9.0.5",
    "vue-i18n": "^9.2.0-beta.15",
    "vue-prismjs": "^1.2.0",
    "vue3-apexcharts": "^1.4.1",
    "vue3-count-to": "^1.1.2",
    "vue3-echarts": "^1.0.4",
    "vue3-google-map": "^0.8.3",
    "vue3-quill": "^0.2.6",
    "vuevectormap": "^1.0.8",
    "vuex": "^4.0.2",
    "yarn": "^1.22.17"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Answer 1

使用@auth0/auth0-vue有一个限制。useAuth0必须在setup挂钩中使用。阅读文档获取信息。

若要向应用程序添加登录，请使用loginWithRedirect函数，该函数公开在useAuth0的返回值上，您可以在组件的setup函数中访问该函数。

<script>
import { ref } from "vue";
import { useAuth0 } from "@auth0/auth0-vue";

export default {
    setup() {
        const message = ref("");
        const { getAccessTokenSilently } = useAuth0();

        const getMessage = async () => {
            const accessToken = await getAccessTokenSilently();
            const { data, error } = await getProtectedResource(accessToken);
          
            if (data) {
              message.value = JSON.stringify(data, null, 2);
            }
          
            if (error) {
              message.value = JSON.stringify(error, null, 2);
            }
        };

        getMessage();

        return {
            message
        }
    },
    ...
}

</script>
<template>...</template>