Javascript 使用beforeEnter将数据传递给管线组件

在输入之前，如何使用

调用函数将数据传递给相应的路由组件

在本例中，beforeEnter的目的是确认有效的承载令牌作为cookie存在

目前，我在进入之前已在
/verify/auth
上点击aws api网关，然后组件加载并在
/list/repos
上调用dynamodb。问题是，两条路由都有内置的AWS api gatewayV2 JWT授权程序保护，因此点击
/verify/auth
是没有意义的

我想做的是在进入之前使
点击
/list/repos
，利用内置的JWT授权器，并用从api调用获得的数据加载下一页。如果用户未正确验证，
beforenter
将不会将用户发送到路由

因此：


api调用->加载页面

而不是


api调用->加载页->api调用

这是我的密码。我在这里看了一个类似的问题，但没能弄明白

index.js

let repositories = [];

async function listRepositories(to, from, next) {
  var isAuthenticated = false;
  console.log("testing listRepositories...");
  if (Vue.$cookies.get("Authorization")) {
    try {
      const response = await fetch(
        process.env.VUE_APP_API_GATEWAY_ENDPOINT + "/list/repos",
        {
          method: "POST",
          body: '{"repo_owner": "sean"}',
          headers: {
            Authorization: Vue.$cookies.get("Authorization")
          }
        }
      );
      repositories = await response.json();
      console.log(repositories);
      if (repositories.message != "Unauthorized") {
        isAuthenticated = true;
        // return {
        //   repositories
        // };
        next();
      }
    } catch (error) {
      console.error(error);
    }
  }
  if (!isAuthenticated) {
    console.log("error not authenticated");
    to("/");
  }
}

const routes = [
  {
    path: "/",
    name: "Login",
    component: () => import("../views/Login.vue")
  },
  {
    path: "/repos",
    name: "Repos",
    // beforeEnter: isAuthenticated,
    beforeEnter: listRepositories,
    props: repositories => {
      {
        repositories;
      }
    },
    component: () => import("../views/Repos.vue")
  }
];

/views/Repos.vue

<template>
  <div id="app" class="small-container">
    <repo-table
      :repositories="repositories"
    />
  </div>
</template>

<script>
import RepoTable from "@/components/RepoTable.vue";

export default {
  name: "Home",
  components: {
    RepoTable
  },
  data() {
    return {};
  },
  props: {
    repositories: {
      type: Array
    }
  }
</script>

<template>
  <div id="repository-table">
    <table border="0">
      <tr>
        <th style="text-align:left">Repository</th>
        // omitted for brevity
      </tr>
      <tbody>
        <tr v-for="(repo, index) in repositories" :key="repo.repo_name">
          <td>
            <b>{{ repo.repo_name }}</b>
            // omitted for brevity
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "repository-table",
  data() {
    return {
      // repositories: []
    };
  },
  props: {
    repositories: {
      type: Array
    }
  },


从“@/components/RepoTable.vue”导入RepoTable；
导出默认值{
姓名：“家”，
组成部分：{
可转载
},
数据（）{
返回{}；
},
道具：{
存储库：{
类型：数组
}
}

/components/RepoTable.vue

<template>
  <div id="app" class="small-container">
    <repo-table
      :repositories="repositories"
    />
  </div>
</template>

<script>
import RepoTable from "@/components/RepoTable.vue";

export default {
  name: "Home",
  components: {
    RepoTable
  },
  data() {
    return {};
  },
  props: {
    repositories: {
      type: Array
    }
  }
</script>

<template>
  <div id="repository-table">
    <table border="0">
      <tr>
        <th style="text-align:left">Repository</th>
        // omitted for brevity
      </tr>
      <tbody>
        <tr v-for="(repo, index) in repositories" :key="repo.repo_name">
          <td>
            <b>{{ repo.repo_name }}</b>
            // omitted for brevity
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "repository-table",
  data() {
    return {
      // repositories: []
    };
  },
  props: {
    repositories: {
      type: Array
    }
  },


存储库
//为简洁起见省略
{{repo.repo_name}
//为简洁起见省略
导出默认值{
名称：“存储库表”，
数据（）{
返回{
//存储库：[]
};
},
道具：{
存储库：{
类型：数组
}
},
在输入前使用路由参数
您可以在输入前使用路由参数从
传递数据。当
道具
的值为
true
时，路由参数将转换为道具：

props: true

现在，您只需要一个名为
repositories
的参数，它将作为道具传递到目标。在您的
beforenter
中，当用户通过身份验证时，您可以添加该参数：

if (repositories.message != "Unauthorized") {
  isAuthenticated = true;
  to.params.repositories = repositories;  // ✅ Adding the data to the param
  next();
}

其他修复：


将
更改为（'/'）
更改为
下一个（'/'）
在每个逻辑路径中添加一个
next
，例如，当出现错误时，以及当满足
条件时，两个
都不满足时

每次调用
next
时，使用
return
调用它，就像
returnnext

另一种选择：

您也可以使用组件内保护来实现这一点。
to
调用应该是
next
，还有其他问题。当身份验证有效时，控制台是否显示了您所期望的内容？
next（）
工作正常，它击中了我的后端并按预期将我带到
/repos
，但它无法将数据传递到
/repos
。数据肯定在那里，只是没有传递。诚然，
到（）
工作不正常，我肯定还有其他问题，但我不太担心这个问题，因为我还没有解决。