页面加载多久可以读取路径名?(how soon on page load can I read the pathname?)
我有一个显示记录列表的页面: myapp.com/records/以及显示所选记录详细信息的页面: myapp.com/record-details/497
(我正在使用ui-router和angular,所以我的路径指定为url:'/ record-details /:id /' )
QA发现,从一个记录页面,他们可以破解URL以尝试点击另一条记录,如下所示: myapp.com/record-details/498
我想阻止这个。
正确记录的数据通过JavaScript从列表内部传递到详细信息页面,因此我有机会进行比较。 所以我正在做的是将通过JS传递的recordId与从URL中提取的id进行比较。 如果它们不匹配,则有人试图破解URL,我可以重新路由该页面。
不幸的是,当我第一次测试它时,URL是不可用的。 我希望了解为什么不,以及需要多长时间才能获得。
我的记录详细信息页面中的代码如下所示:
function init(){ // do some regex manipulation of pathname // compare url-RecordId with in-memory-RecordId console.log('rawurl : ' + window.location.pathname); } init();
输出:
rawurl:myapp.com/records/
所以:当加载我的DETAILS页面时,pathname变量仍然指向记录列表页面!
我等待路径名反映详细信息页面URL的时间越长,我的页面对用户可见的空白,破坏和即将重新路由的时间越长,这是一种糟糕的用户体验。
如何快速有效地重新路由页面?
I've got a page showing a list of records: myapp.com/records/ and a page showing the details of a selected record: myapp.com/record-details/497
(I'm using ui-router and angular so my path is specified like url: '/record-details/:id/')
QA has discovered that, from one record page, they can hack the URL to try to hit another record like this: myapp.com/record-details/498
I want to prevent this.
The data for the correct record are passed internally, via JavaScript, from list to details page, so I have a chance to compare. So what I'm doing is comparing the recordId passed via JS with the id extracted from the URL. If they do not match then someone is trying to hack the URL and I can reroute the page.
Unfortunately, the URL is NOT AVAILABLE when I first test it. I wish to understand why not, and how long it will take to be available.
The code in my record-details page starts like this:
function init(){ // do some regex manipulation of pathname // compare url-RecordId with in-memory-RecordId console.log('rawurl : ' + window.location.pathname); } init();
Output:
rawurl : myapp.com/records/
So: when loading my DETAILS page, the pathname variable is still pointing at the record list page!
The longer I wait for pathname to reflect the details page URL, the longer my page is visible to the user as blank, broken and about to be rerouted, which is a terrible user experience.
How can I quickly and efficiently reroute the page?
原文:https://stackoverflow.com/questions/28967957
最满意答案
类别组件中的计算值将在实例化类别组件时尝试运行。 由于您的数据是异步检索的,这意味着在从服务器检索数据之前,计算机会尝试
filter
空对象(因为这是categories
初始化的方式)。相反,用一个空数组
[]
初始化categories
。The computed value in the category component is going to try to run when the category component is instantiated. Since your data is retrieved asynchronously, that means before the data is retrieved from the server, the computed will attempt to
filter
an empty object (because that is howcategories
is initialized).Instead, initialize
categories
with an empty array[]
.
相关问答
更多-
通过本地客户端程序获取服务器mysql数据库信息[2023-04-27]
ajax -
你在这里的一半,你定义props:true的路线,这意味着每个在URL中匹配的动态属性将作为道具传递,所以: //this will pass 'id' as a prop to the playlist component { path: '/categories/:id/playlists', props: true, component: Playlists }, 所以在播放列表组件中你会有这个: props: ['id'], data() { return { ...
-
要访问路由器参数 ,您需要在代码中使用this.$route.params 。 您的代码应如下所示: const vc = { template: '#video-capture' , mounted () { this.init() }, methods: { init () { console.log(this.$route); //should return object console.log(this.$route.params); / ...
-
你认为你的问题是异步性是正确的。 你基本上需要在rates()函数中对响应进行任何处理,而不是让checkzip()返回一个值。 如果将alert()调用放在rates()方法中,则应该看到一些输出。 function checkzip(x) { $.ajax({ type:'POST', url:'zipcheck.php', data:{zip: x}, async: false }).done(function (r) ...
-
类别组件中的计算值将在实例化类别组件时尝试运行。 由于您的数据是异步检索的,这意味着在从服务器检索数据之前,计算机会尝试filter空对象(因为这是categories初始化的方式)。 相反,用一个空数组[]初始化categories 。 The computed value in the category component is going to try to run when the category component is instantiated. Since your data is retr ...
-
有几种方法可以做到这一点。 最简单的方法是在组件本身上包含子标题导航组件,但是您说上面的内容不会改变,因此您需要将某种数据传递给子导航组件以让它知道要渲染的内容。 一种方法是使用路线。 例如,在一个应用程序中,我们需要为一组页面设置特定的子导航。 我们在meta中声明了一个“区域”,然后在标题组件中我们读取了区域并为其显示了正确的子导航。 在router.js中: { path: '/profile/user', name: 'Profile', component: Profile ...
-
问题解决了,检查初始帖子,我编辑它以显示解决方案。 感谢所有花时间帮助我的人 Problem solved, check the initial post, I edited it to show the solution. Thank you to everyone who took time to help me
-
处理步骤: axios api正在呼叫 组件已创建 beforeRouteEnter next()被调用。 那时候,因为组件已经创建,所以vm变量可用。 如果您控制台登录您的组件 created() { console.log('Component is created!') }, beforeRouteEnter(to, from, next) { setTimeout(() => { next(vm => { console.log('next() ...
-
函数$.ajax是异步的。 函数getTitle将立即返回undefined。 如果要对数据执行某些操作,请将该代码放在success函数中: function getTitle(){ var q= 'https://www.googleapis.com/youtube/v3/videos?id=[VIDEOID]&key=[APIKEY]&fields=items(snippet(title))&part=snippet' $.ajax({ url: q, ...
-
你正忙着加载内容。 每当动态加载内容时,您需要将事件绑定到已存在的父级的子级。 例如: $('#areaid').change(function(){ 应该改为 $('body').on('change', '#areaid', function() { You are doing lazy loading of content. Whenever the content is loaded dynamically you need to bind the event to the child with r ...