[英]Pass data with beforeEnter to route components
我将如何 go 关于使用 beforeEnter 调用beforeEnter
将数据传递给相应的路由组件?
在这种情况下, beforeEnter 的目的是确认有效的不记名令牌作为 cookie 存在。
目前,我beforeEnter
在/verify/auth
上点击 aws api 网关,然后组件加载并在/list/repos
上调用 dynamodb。 问题是,两条路由都受到内置 AWS api gatewayV2 JWT 授权方的保护,因此点击/verify/auth
毫无意义。
我想做的是beforeEnter
命中/list/repos
,利用内置的 JWT 授权器,并使用从 api 调用获得的数据加载下一页。 如果用户未正确验证, beforeEnter
不会将用户发送到路由。
所以:
而不是
这是我的代码。 我在这里查看了一个类似的问题,但无法弄清楚。 将数据传递给路由的组件 beforeEnter
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>
./components/RepoTable.vue
<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
}
},
beforeEnter
使用路由参数您可以使用路由参数从beforeEnter
传递数据。 当props
的值为true
时,路由参数将被转换为 props:
props: true
现在您只需要一个名为repositories
的参数,它将作为道具传递到目的地。 在您的beforeEnter
中,当用户通过身份验证时,您可以添加该参数:
if (repositories.message != "Unauthorized") {
isAuthenticated = true;
to.params.repositories = repositories; // ✅ Adding the data to the param
next();
}
其他修复:
to('/')
更改为next('/')
next
一个,例如,当出现错误并且条件都不if
时。next
时,都用return
调用它,比如return next
另外的选择:
您也可以使用beforeRouteEnter
组件内防护来实现此目的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.