教你如何在Nuxt3服务端中使用浏览器端的API

https://bu.dusays.com/2023/12/16/657d5343a8f99.png

教你如何在Nuxt3服务端中使用浏览器端的API

Nuxt3 项目中,他的运行环境是服务端,所以并不具有浏览器端的 API,比如 window 对象。

但我在写项目中有一个需求,我需要在 .js.ts 文件中编写路由守卫,通过获取 localStorage 中的 Token 来判断是否登录,如果已登录就放行,让用户可以正常访问页面,如果没有登录就不允许放行。

当我运行并访问页面后 就会报错:localStorage is not defined
微信图片_20231216152428.png

于是我开始查阅 Nuxt3 官方文档,但并没有找到解决的办法。
接着我就使用 ChatGPT 但也毫无所获
因为 Nuxt3 是去年这个时候才发布的,是一个比较新的技术,百度跟 ChatGPT 要么答非所问,要么得到的结果是错的,最终折腾了差不多两个小时左右还是没有解决

最后我便在微信、QQ中群发寻求解决办法。
微信图片_20231216153017.jpg

没想到这招还挺有用的,有一位群友一句话点醒了我,他给我介绍了一个属性:process.client 用于判断是客户端还是服务端,顿时我恍然大悟

通过这段代码来区分是不是浏览器端,如果是就为 true 执行 if 里面的代码,这样就可以使用浏览器端的API了
微信图片_20231216152512.png

评论区
头像