在伪造页面加载之前设置本地存储项目吗?

时间:2018-08-10 14:48:38

标签: javascript local-storage puppeteer

如果您没有设置JWT_TOKEN,我们有一些路由逻辑可将您踢到主页...我想在页面加载之前/调用js之前进行设置。

我该怎么做?

5 个答案:

答案 0 :(得分:10)

您必须这样注册private void Btn_print_Click(object sender, RoutedEventArgs e) { PrintDialog Printdlg = new PrintDialog(); if ((bool)Printdlg.ShowDialog().GetValueOrDefault()) { Size pageSize = new Size(Printdlg.PrintableAreaWidth, Printdlg.PrintableAreaHeight); // sizing of the element. print_content.Measure(pageSize); print_content.Arrange(new Rect(5, 5, pageSize.Width, pageSize.Height)); Printdlg.PrintVisual(print_content, Title); } } 项:

localStorage

您应该在页面await page.evaluate(() => { localStorage.setItem('token', 'example-token'); }); 之后执行此操作-浏览器必须具有URL才能在其上注册本地存储项目。此后,再次进入同一页面,该时间令牌应该在页面加载之前在此处。

这是一个可以正常工作的示例:

page.goto

答案 1 :(得分:4)

无需将goTo加倍,这将起作用:

const browser = await puppeteer.launch();
browser.on('targetchanged', async (target) => {
  const targetPage = await target.page();
  const client = await targetPage.target().createCDPSession();
  await client.send('Runtime.evaluate', {
    expression: `localStorage.setItem('hello', 'world')`,
  });
});
// newPage, goTo, etc...

改编自灯塔文档中的伪娘,其操作类似:https://github.com/GoogleChrome/lighthouse/blob/master/docs/puppeteer.md

答案 2 :(得分:3)

在 2021 年,它使用以下代码:

// store in localstorage the token
   await page.evaluateOnNewDocument (
     token => {
       localStorage.clear();
       localStorage.setItem('token', token);
     }, 'eyJh...9_8cw');
   // open the url
 await page.goto('http://localhost:3000/Admin', { waitUntil: 'load' });

不幸的是,第一条评论的下一行不起作用

await page.evaluate(() => {
  localStorage.setItem('token', 'example-token'); // not work, produce errors :(
});

答案 3 :(得分:1)

Puppeteer's GitHub issues中对此进行了一些讨论。

您可以在域上加载页面,设置localStorage,然后在localStorage准备就绪的情况下转到要加载的实际页面。您也可以拦截第一个url加载以立即返回,而不是实际加载页面,从而可以节省大量时间。

const doSomePuppeteerThings = async () => {
  const url = 'http://example.com/';
  const browser = await puppeteer.launch();
  const localStorage = { storageKey: 'storageValue' };
  setDomainLocalStorage(browser, url, localStorage);

  const page = await browser.newPage();
  // do your actual puppeteer things now
};

const setDomainLocalStorage = async (browser, url, values) => {
  const page = await browser.newPage();
  await page.setRequestInterception(true);
  page.on('request', r => {
    r.respond({
      status: 200,
      contentType: 'text/plain',
      body: 'tweak me.',
    });
  });
  await page.goto(url);
  await page.evaluate(values => {
    for (const key in values) {
      localStorage.setItem(key, values[key]);
    }
  }, values);
  await page.close();
};

答案 4 :(得分:-1)

尝试和其他脚本标签。示例:

假设您有一个main.js脚本来存放您的路由逻辑。

然后使用一个setJWT.js脚本来容纳您的令牌逻辑。

然后在html中加载这些脚本的方式按以下顺序对其进行排序:

<script src='setJWT.js'></script>
<script src='main.js'></script>

这仅对页面的初始启动有用。

但是,大多数路由库通常都具有事件挂接系统,您可以在路由渲染之前将其挂接到其中。我会将setJWT逻辑存储在该回调中的某个位置。