使用 VS Code 中的 Auth0 为 REST API 调用调试 VUE 应用程序

Posted 2023-03-08

【中文标题】使用 VS Code 中的 Auth0 为 REST API 调用调试 VUE 应用程序

【英文标题】：Debug VUE app for REST API call protected using Auth0 in VS Code

【发布时间】：2021-02-28 22:47:03

【问题描述】：

我正在尝试为调用受 Auth0 保护的 REST API 端点的 VUE 应用程序调试 Auth0 code。 在 VS Code 中，我在调试过程中有一个奇怪的行为。

考虑以下代码：

<template>
  <div>
    <div class="mb-5">
      <h1>External API</h1>
      <p>
        Call an external API by clicking the button below. This will call the
        external API using an access token, and the API will validate it using
        the API's audience value.
      </p>

      <button class="btn btn-primary mt-5" @click="callApi">Call API</button>
    </div>

    <div class="result-block-container">
      <div :class="['result-block', executed ? 'show' : '']">
        <h6 class="muted">Result</h6>
        <pre v-highlightjs="JSON.stringify(apiMessage, null, 2)">
          <code class="js rounded"></code>
        </pre>
      </div>
    </div>
  </div>
</template>

<script>
export default 
  name: "Api",
  data() 
    return 
      apiMessage: null,
      executed: false,
    ;
  ,
  methods: 
    async callApi2() 
      this.executed = true;
      try 
        const  data  = await this.$http.get(
          "https://gorest.co.in/public-api/posts"
        );

        this.apiMessage = data;
        //throw new Error("New sync error");
       catch (error) 
        this.apiMessage = error.stack;
      
    ,

    async callApi() 
      this.executed = true;
      try 
        const accessToken = await this.$auth.getTokenSilently();
        const  data  = await this.$http.get("/api/external", 
          headers: 
            Authorization: `Bearer $accessToken`,
          ,
        );

        this.apiMessage = data;
       catch (error) 
        //console.log(err);
        this.apiMessage = `Error: the server responded with '$error.response.status: $error.response.statusText'`;
      
    ,
  ,
;
</script>

方法callApi2 和callApi 几乎相同，但是如果我尝试通过在catch 放置断点来调试第二种方法，我将看不到error 的内容。即使存在错误（是否显式生成），我也可以毫无问题地调试第一种方法。

文件“launch.json”如下：

  "version": "0.2.0",
  "configurations": [
    
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:3000",
      "webRoot": "$workspaceFolder/src",
      "breakOnLoad": true,
      "pathMapping": 
        "/_karma_webpack_": "$workspaceFolder"
      ,
      "sourceMapPathOverrides": 
        "webpack:/*": "$webRoot/*",
        "/./*": "$webRoot/*",
        "/src/*": "$webRoot/*",
        "/*": "*",
        "/./~/*": "$webRoot/node_modules/*"
      ,
      "preLaunchTask": "serve"
    
  ]

文件“tasks.json”是：

  "version": "2.0.0",
  "tasks": [
    
      "label": "serve",
      "type": "npm",
      "script": "serve-vue",
      "isBackground": true,
      "problemMatcher": [
        
          "base": "$tsc-watch",
          "background": 
            "activeOnStart": true,
            "beginsPattern": "Starting development server",
            "endsPattern": "Compiled successfully"
          
        
      ],
      "group": 
        "kind": "build",
        "isDefault": true
      
    
  ]

我不知道为什么。

【参考方案1】：

通过对上述问题的进一步调查，我注意到使用 Promise 语法而不是 async/await VS Code 调试器似乎工作正常（我可以在调试器中检查错误）。 我想是launch.json中报告的设置问题，但我不知道为什么/是什么。 修改后的代码下方：

methods: 
    // this method has debug issues
    async callApi2() 
      this.executed = true;
      try 
        const  data  = await this.$http.get(
          "https://gorest.co.in/public-api/posts5"
        );
        this.apiMessage = data;
       catch (error) 
        this.apiMessage = error.stack;
      
    ,
    // this method without async/await has no debugging issues !!
    callApi() 
      this.executed = true;

      const accessToken = "gjkgkjgk"; //await this.$auth.getTokenSilently();
      this.$http
        .get("/api/external", 
          headers: 
            Authorization: `Bearer $accessToken`,
          ,
        )
        .then((data) => (this.apiMessage = data))
        .catch(
          (error) =>
            //console.log(err);
            (this.apiMessage = `Error: the server responded with '$error.response.status: $error.response.statusText'`)
        );
    ,
  ,
;
</script>