问题描述
限时送ChatGPT账号..我将如何让使用 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屋!
更多推荐
[db:关键词]
本文发布于:2023-04-27 00:31:17,感谢您对本站的认可!
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:路由 组件 数据 beforeEnter
- 上一篇: 如何使用achartengine为片段中的Intent充气(How to inflate an Intent in a fragment using achartengine)
- 下一篇: R中的选择热图
发布评论