首页 \ 问答 \ 页面加载多久可以读取路径名?(how soon on page load can I read the pathname?)

页面加载多久可以读取路径名?(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
更新时间:2021-10-10 22:10

最满意答案

类别组件中的计算值将在实例化类别组件时尝试运行。 由于您的数据是异步检索的,这意味着在从服务器检索数据之前,计算机会尝试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 how categories is initialized).

Instead, initialize categories with an empty array [].

相关问答

更多

相关文章

更多

最新问答

更多
  • 您如何使用git diff文件,并将其应用于同一存储库的副本的本地分支?(How do you take a git diff file, and apply it to a local branch that is a copy of the same repository?)
  • 将长浮点值剪切为2个小数点并复制到字符数组(Cut Long Float Value to 2 decimal points and copy to Character Array)
  • OctoberCMS侧边栏不呈现(OctoberCMS Sidebar not rendering)
  • 页面加载后对象是否有资格进行垃圾回收?(Are objects eligible for garbage collection after the page loads?)
  • codeigniter中的语言不能按预期工作(language in codeigniter doesn' t work as expected)
  • 在计算机拍照在哪里进入
  • 使用cin.get()从c ++中的输入流中丢弃不需要的字符(Using cin.get() to discard unwanted characters from the input stream in c++)
  • No for循环将在for循环中运行。(No for loop will run inside for loop. Testing for primes)
  • 单页应用程序:页面重新加载(Single Page Application: page reload)
  • 在循环中选择具有相似模式的列名称(Selecting Column Name With Similar Pattern in a Loop)
  • System.StackOverflow错误(System.StackOverflow error)
  • KnockoutJS未在嵌套模板上应用beforeRemove和afterAdd(KnockoutJS not applying beforeRemove and afterAdd on nested templates)
  • 散列包括方法和/或嵌套属性(Hash include methods and/or nested attributes)
  • android - 如何避免使用Samsung RFS文件系统延迟/冻结?(android - how to avoid lag/freezes with Samsung RFS filesystem?)
  • TensorFlow:基于索引列表创建新张量(TensorFlow: Create a new tensor based on list of indices)
  • 企业安全培训的各项内容
  • 错误:RPC失败;(error: RPC failed; curl transfer closed with outstanding read data remaining)
  • C#类名中允许哪些字符?(What characters are allowed in C# class name?)
  • NumPy:将int64值存储在np.array中并使用dtype float64并将其转换回整数是否安全?(NumPy: Is it safe to store an int64 value in an np.array with dtype float64 and later convert it back to integer?)
  • 注销后如何隐藏导航portlet?(How to hide navigation portlet after logout?)
  • 将多个行和可变行移动到列(moving multiple and variable rows to columns)
  • 提交表单时忽略基础href,而不使用Javascript(ignore base href when submitting form, without using Javascript)
  • 对setOnInfoWindowClickListener的意图(Intent on setOnInfoWindowClickListener)
  • Angular $资源不会改变方法(Angular $resource doesn't change method)
  • 在Angular 5中不是一个函数(is not a function in Angular 5)
  • 如何配置Composite C1以将.m和桌面作为同一站点提供服务(How to configure Composite C1 to serve .m and desktop as the same site)
  • 不适用:悬停在悬停时:在元素之前[复制](Don't apply :hover when hovering on :before element [duplicate])
  • 常见的python rpc和cli接口(Common python rpc and cli interface)
  • Mysql DB单个字段匹配多个其他字段(Mysql DB single field matching to multiple other fields)
  • 产品页面上的Magento Up出售对齐问题(Magento Up sell alignment issue on the products page)