分类 Vuejs 下的文章

如果我们使用auth0或者okta等第三方提供的IDaas,那么就要设置一下callback url。

通常,有一个参数是response_mode,默认是query,所以通常是忽略的,但如果你用vuejs,Reactjs或者Angular等构建的SPA,通常用到routerhash mode,那么这个时候就会导致报错,因为单纯的静态页面,url #后面的部分会被忽略,我目前还没搞明白到底是被浏览器忽略,还是auth0的服务器,还是其他什么地方忽略掉了。总之就总是不能执行这个带#的callback。
如果实在想用这个#,也可以的,但要配置一下:
https://developer.okta.com/docs/api/resources/oidc

我配置了,就是response_mode: 'fragment',然后不好使。我高度怀疑是需要一个server才能生效的。总之,只有history mode才生效。

好,那就用history模式呗。

但我的小app,

- 阅读剩余部分 -

比如vue-router,可以在多个地方写router hook,比如可以写全局guard,可以per-route写guard,甚至可以在component里写。

那么,在component里写,似乎不错,但一些hook,比如beforeRouteEnter,是不能用到这个component本身的,因为:

The beforeRouteEnter guard does NOT have access to this, because the
guard is called before the navigation is confirmed, thus the new
entering component has not even been created yet.

一开始非常简单,直接把tracking script粘贴到public/index.html的head里,结果发现只是追踪这一页而已,因为所有变化都是在<div id="app"></div>里,所以你看不出来用户到底干嘛了,当然也根本追踪不了page view这些指标啊。

至少我是这么认为的。我为什么这么认为呢?因为我更新代码后,看了一下Google Analytics数据,发现只有1个pageview,这显然不对嘛,怎么可能就一个pageview呢。所以才恍然大悟。

于是就装了一个插件:vue-analytics,不知道效果咋样,但应该比粘贴到index.html里强吧。

查了一圈,最直接的解释就是,vuereact最后编译出来的是一堆静态的资源,html,css,js等。
因此,这是没办法使用dotenv的。

The environment variables are embedded during the build time. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime.

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables

那真的需要使用dotenv来保护自己的一些敏感信息,怎么办?
那只好用一个后端框架做桥接了,比如expressjs

目前的思路是这样的:

1、尽量减少网络请求的次数,毕竟网络请求不稳定而且慢。所以,应该直接返回资源本身,而不是返回资源id,然后再根据id再请求一次。