我是Next.js的新手,我正在使用jwt令牌与身份验证系统进行斗争.我想知道使用身份验证系统存储jwt令牌和路由的最佳/标准方法是什么.我一直在尝试不同的方法,从不同的教程/文章,但不太明白.这是我尝试过的.
当用户登录时,它会将用户名/密码发送到一个单独的 api服务器(例如处理后端内容的新项目),服务器将响应access-token,然后在Next.js项目中,我用接收到的令牌设置cookie.在Next.js项目中,受保护的路由将使用a withAuthhoc 进行包装,这将检查cookie中的令牌.这种方法的问题是它容易受到XSS的攻击,因为cookie没有httpOnly标志.
这类似于1.)但使用时localStorage,问题是access-token无法在第一次请求时发送到服务器.(这个我不确定,但根据我的理解,在每个http请求中,我必须access-token手动操作,那么我无法控制的请求呢？例如,首先请求或使用<a>标记).
我在Next.js服务器(自定义快速服务器)中编写了身份验证后端.用户登录时,服务器将对其进行验证,然后设置httpOnly cookie.然后问题是,使用客户端路由(使用Next.js路由器转到url),它无法检查令牌.例如,如果页面是使用withAuthhoc 包装的,但它无法使用javascript访问cookie中的令牌.
我见过很多人,在getInitialProps受保护的路由中,他们只检查cookie/localStorage中的存在令牌,然后如果令牌被撤销或列入黑名单,他们如何处理它,因为他们没有发送令牌给服务器？或者我是否必须在每个客户端页面更改时将令牌发送到服务器？
如何使用PWA（渐进式Web应用程序）进行SSR（服务器端渲染）？
据我了解，
SSR运行时将加载页面并运行必要的脚本以将数据加载到页面上。然后返回呈现的html。这对于不运行javascript的Web爬网程序和没有脚本的浏览器很重要。至少第一印象将可用。
除其他外，PWA需要具有一个外壳，该外壳将被缓存，并且数据将在其之后。这意味着，即使用户处于脱机状态，shell也将被加载。
因此，如果我们要预先渲染数据，那么如何缓存与数据分开的外壳呢？
将Angular Universal与使用动态内容的页面一起使用时,无法使SSR正常工作.所有其他页面都有效,动态页面返回HTML但不包含动态数据.
方法叫:
ngOnInit() {
const div = this.renderer.createElement('div');
const texttest = this.renderer.createText('this works');
this.renderer.appendChild(div, texttest);
this.renderer.appendChild(this.content.nativeElement, div);
this.createLinkForCanonicalURL();
// The HTML never shows, the method works fine.
this._contentfulService.getBlogPosts().then(posts => {
this.blogPosts = _.orderBy(posts, ['sys.createdAt'], ['desc']);
});
}
服务方式
getBlogPosts(query ? : object): Promise<Entry<any>[]> {
return this.cdaClient.getEntries(Object.assign({
content_type: CONFIG.contentTypeIds.blogPosts
}, {
'fields.private': false
}))
.then(res => res.items);
}
模板:
这从未在源中显示.
<li class="blog-post" *ngFor="let post of blogPosts">
<h1>{{post.fields.title}}</h1>
</li>
尝试过入门套件并且它们无法调用相同的方法.还尝试使用render2注入和解析器服务来测试在加载之前获取数据.
似乎什么都没有用？
任何帮助,将不胜感激!
编辑
这是我的server.ts文件
// These are important and needed before …是否可以使用Next js在某些页面上禁用ssr？例如，我有一个带有产品说明的页面，在该页面上我使用ssr进行SEO，但我也有一个页面，其中列出了可以过滤的项目或产品，对于该页面，我不想使用ssr，因为页面每次都会动态生成，如何在此页面上禁用ssr？
我最近将我公司的网站从React迁移到了Angular,因为我们的大多数项目都已经在Angular 7上了.作为"使用 - 最新和最伟大"的人,我决定实现服务器端渲染获得谷歌网页速度评级接近100/100(目前为42/100).我一直在修补这个星期的大部分时间,但没有成功 - 最新的障碍对我来说特别难以克服.这是关于我的设置的简要信息,然后我会详细介绍:
当我尝试渲染为SSR设置的layout.html文件时,这是我得到的错误:
TypeError: Cannot read property 'subscribe' of undefined
at new ApplicationRef (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:43263:37)
at _createClass (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:46296:20)
at _createProviderInstance (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:46258:26)
at initNgModule (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:46190:32)
at new NgModuleRef_ (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:46918:9)
at createNgModuleRef (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:46907:12)
at Object.debugCreateNgModuleRef [as createNgModuleRef] (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:48738:12)
at NgModuleFactory_.module.exports.NgModuleFactory_.create (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:49466:25)
at C:\code\lemmsoftWebsite\repo\node_modules\@angular\core\bundles\core.umd.js:14656:47
at ZoneDelegate.module.exports.ZoneDelegate.invoke (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:139510:26)
at Object.onInvoke (C:\code\lemmsoftWebsite\repo\node_modules\@angular\core\bundles\core.umd.js:14194:37)
at ZoneDelegate.module.exports.ZoneDelegate.invoke (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:139509:32)
at Zone.module.exports.Zone.run (C:\code\lemmsoftWebsite\repo\public\site\serverBuild\main.js:139260:43)
at NgZone.run (C:\code\lemmsoftWebsite\repo\node_modules\@angular\core\bundles\core.umd.js:14108:32)
at PlatformRef.bootstrapModuleFactory (C:\code\lemmsoftWebsite\repo\node_modules\@angular\core\bundles\core.umd.js:14654:27)
at renderModuleFactory (C:\code\lemmsoftWebsite\repo\node_modules\@angular\platform-server\bundles\platform-server.umd.js:1033:43)
at View.module.app.engine (C:\code\lemmsoftWebsite\repo\modules\clients\site\layout\index.js:60:4) …我正在使用react-boilerplate(使用react-router,sagas,express.js)作为我的React应用程序,并且在它之上我添加了SSR逻辑,这样一旦它收到HTTP请求,它就会根据URL呈现反应组件到字符串并发送HTML字符串返回客户端.
虽然反应呈现在服务器端发生,但它也fetch通过传真向一些API(基于URL的最多5个端点)发出请求,以便在组件实际呈现组件之前获取组件的数据.
如果我同时向Node服务器发出几个请求,那么一切都很好,但是一旦我模拟了100多个并发请求的加载并且它开始处理它,那么在某些时候它会崩溃而没有任何异常的迹象.
我在尝试调试应用程序时注意到的是,一旦节点服务器开始处理100多个传入请求,它就会同时向API发送请求,但在停止堆叠这些请求之前不会收到任何实际响应.
用于在服务器端呈现的代码:
async function renderHtmlDocument({ store, renderProps, sagasDone, assets, webpackDllNames }) {
// 1st render phase - triggers the sagas
renderAppToString(store, renderProps);
// send signal to sagas that we're done
store.dispatch(END);
// wait for all tasks to finish
await sagasDone();
// capture the state after the first render
const state = store.getState().toJS();
// prepare style sheet to collect generated css
const styleSheet = new ServerStyleSheet();
// 2nd render phase - the sagas triggered …我想知道是否有人可以向我介绍如何为vue SSR（服务器端渲染）设置宗地的资源或示例。
还是包裹无法使用Vue SSR？
我正努力让我的服务器端渲染和服务工作者在服务器端合作.
有关localhost的信息 - >工作
这是按预期工作的.服务工作人员在每次更新时都会工作并更新我的应用.此外; 一个curl localhost:8082送我回我的信息.
我用以下命令启动我的应用程序: npm run ssr
"ssr": "npm run build:ssr && npm run serve:ssr",
"build:ssr": "npm run build:client-and-server-bundles",
"serve:ssr": "node dist/server.js",
"build:client-and-server-bundles": "ng build --prod && npm run webpack:server",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors"
有关生产的信息: - >不工作
网站是通过HTTPS:https: //airdropers.io网站进程在关闭端口上运行,并且HAPROXY将流量从443重定向到网络服务器的端口
Webserver日志上显示问题:无法订阅通知错误:此浏览器禁用或不支持服务工作者
额外信息:
localhost和production上的节点js是相同的:v9.0.0我使用以下过程构建生产:
更新23/02/2019
我现在有了更深刻的理解.我的问题是我使用节点命令启动我的SSR/PWA服务器,例如"node dist/server.js".
从我的理解"node dist/server.js"不适用于服务工作者(PWA)我引用(https://angular.io/guide/service-worker-getting-started)
由于ng服务不适用于服务工作者,因此必须使用单独的HTTP服务器在本地测试项目.您可以使用任何HTTP服务器.以下示例使用来自npm的http-server软件包.要减少冲突的可能性并避免提供过时的内容,请在专用端口上进行测试并禁用缓存.
我无法启动是http-server dist/browser因为我将失去SSR能力.
如何启动PWA/SSR服务器？我应该使用什么命令？
我应该做什么？
更新24/02/2019
正如@GökhanKurt提到的那样,服务工作者无法正常使用我的SSR服务器.我需要SSR用于搜索引擎优化,我需要一个服务工作者来进行浏览器推送通知.我有什么解决方案来处理浏览器用户推送通知？One Signals等第三方lib？
我们欢迎任何想法建议,以帮助我完成这项工作.感谢您的支持,Alex
我对ssr和代码拆分的优点以及仅在客户端上完成的代码拆分略感困惑.
我的想法是,首先渲染页面的服务器将导致更好的体验,而不必解析所有的javascript然后再渲染服务器.
我很困惑代码拆分如何适应ssr模型,是ssr渲染第一个命中,然后在客户端上完成代码拆分？
React.Lazy指出react.client是在客户端上完成的.它与服务器上的代码拆分有何不同？如果你去一个特定的路线然后你为第一次渲染检索那个块？
我理解React.Lazy都是在客户端完成的,他们已经明确表达了这一点.如果在服务器上完成它会有什么不同.
使用代码拆分对ssr有什么好处.它不只是增加了复杂性吗？
我正在运行nextJS应用程序，该应用程序正在运行SSR。
但是当我确实得到错误时：
警告：没想到服务器HTML在<div>中包含<div>。
因此，服务器端和客户端节点之间似乎存在差异。我如何找到这些差异？
这是一个示例应用程序的仓库：
https://github.com/jaqua/nextjs-app
只要运行npm install和npm run dev