使用 beforeEnter 传递数据来路由组件 [英] Pass data with beforeEnter to route components
问题描述
我将如何让使用 beforeEnter 调用的函数将数据传递给相应的路由组件?
在这种情况下，beforeEnter 的目的是确认一个有效的不记名令牌作为 cookie 存在.
目前，我有 beforeEnter 在 /verify/auth 上点击 aws api 网关，然后组件加载并调用 /list/上的 dynamodb回购.问题是，两条路由都受到内置 AWS api gatewayV2 JWT 授权器的保护，因此点击 /verify/auth 是毫无意义的.
我想要的是让 beforeEnter 点击 /list/repos，利用内置的 JWT 授权器，并使用从 api 获取的数据加载下一页称呼.如果用户未正确验证，beforeEnter 不会将用户发送到路由.
所以:
- api 调用 ->加载页面
而不是
- api 调用 ->加载页面 ->api调用
这是我的代码.我在这里查看了一个类似的问题，但无法弄清楚.将数据传递给路由的组件beforeEnter
index.js
let repositories = [];异步函数 listRepositories(to, from, next) {var isAuthenticated = false;console.log(测试列表存储库...");如果(Vue.$cookies.get(授权")){尝试 {const 响应 = 等待获取(process.env.VUE_APP_API_GATEWAY_ENDPOINT + "/list/repos",{方法:POST"，正文:'{repo_owner":sean"}'，标题:{授权:Vue.$cookies.get("Authorization")}});存储库 = 等待 response.json();控制台日志(存储库)；如果(repositories.message !=未授权"){isAuthenticated = true;//返回 {//存储库//};下一个();}} 捕捉(错误){控制台错误(错误)；}}如果 (!isAuthenticated) {console.log(错误未验证");到(/")；}}const 路由 = [{路径:/"，名称:登录"，组件:() =>导入(../views/Login.vue")},{路径:/回购"，名称:回购"，//beforeEnter: isAuthenticated,beforeEnter:listRepositories，道具:存储库 =>{{存储库；}},组件:() =>导入(../views/Repos.vue")}];./views/Repos.vue
<div id="app";类=小容器"><repo-table:repositories="repositories";/></模板><脚本>从@/components/RepoTable.vue"导入 RepoTable；导出默认{名称:家"，成分: {回购表},数据() {返回 {};},道具: {存储库:{类型:数组}}
./components/RepoTable.vue
<div id="repository-table"><表格边框=0"><tr><th style="text-align:left">Repository</th>//为简洁起见省略</tr><tr v-for=(repo, index) in repositories":key="repo.repo_name"><td><b>{{ repo.repo_name }}</b>//为简洁起见省略</td></tr></tbody></模板><脚本>导出默认{名称:存储库表"，数据() {返回 {//存储库:[]};},道具: {存储库:{类型:数组}},
解决方案 在 beforeEnter
中使用路由参数您可以使用路由参数从 beforeEnter 传递数据.当props的值为true时，路由参数会被转换为props:
道具:真
现在您只需要一个名为 repositories 的参数，它将作为道具传递到目的地.在您的 beforeEnter 中，当用户通过身份验证时，您可以添加该参数:
if (repositories.message != "Unauthorized") {isAuthenticated = true;to.params.repositories = 存储库；//✅ 将数据添加到参数中下一个();}
其他修复:
- 将
to('/')改为next('/') - 在每个逻辑路径中添加一个
next，例如当出现错误并且if条件都不满足时. - 每次调用
next 时都用 return 调用，就像 return next
另一种选择:
您也可以使用beforeRouteEnter 组件内保护.
How would I go about having a function called with beforeEnter pass data to the corresponding route component(s)?
The purpose of beforeEnter in this case is to confirm that a valid bearer token is present as a cookie.
Currently, I have beforeEnter hitting aws api gateway on /verify/auth, and then the component loads and makes a call to dynamodb on /list/repos. The thing is, both routes are protected with a builtin AWS api gatewayV2 JWT authorizer, so it's kind of pointless to hit /verify/auth.
What I would like is to make beforeEnter hit /list/repos, leverage the built in JWT authorizer, and load the next page with the data obtained from the api call. If the user isn't properly authenticated, beforeEnter won't send the user to the route.
So:
- api call -> load page
rather than
- api call -> load page -> api call
Here's my code. I had a look at a similar question here, but wasn't able to figure it out. passing data to route's component 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
}
},
解决方案 Using route params with beforeEnter
You can pass data from beforeEnter using route params. When the value of props is true, route params will be converted to props:
props: true
Now you just need a param called repositories and it will be passed as a prop to the destination. In your beforeEnter, when the user is authenticated you can add that param:
if (repositories.message != "Unauthorized") {
isAuthenticated = true;
to.params.repositories = repositories; // ✅ Adding the data to the param
next();
}
Other fixes:
- Change
to('/') to next('/')
- Add a
next in every logic path, for example when there is an error and when neither if condition is met.
- Each time you call
next call it with return like return next
Another option:
You could also achieve this using the beforeRouteEnter in-component guard.
这篇关于使用 beforeEnter 传递数据来路由组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆