![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c459d7749f62b3bba14551effad4aa4b.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d1fc994a80ad2481cda8d9ce1d88f307.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5df34e30e756a9ee73c1af9c24e03b0c.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e8213660cf6be45ae4628f374ebcd060.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3aee9b763636b89060fae78a501e6043.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9e00187266fef17e1ee674a078eceac2.png)
VUE_APP_IS_DEFAULT_LOGIN是设置的一个参数,用于设置是否默认登录,即自己在配置文件中设置默认登录的用户名和密码,实现自动登录,也可以是使用单点登录鉴权。在代码中增加“ if (isDefaultLogin == “true”) ”的判断还有一个原因是:不需要在所有情况下都保存到sessionStorage中,只有在需要内嵌系统页面的时候才需要存到sessionStorage,其他情况下不需要保存,保证了系统的安全性,避免被破解攻击,因为使用cookie的安全性比sessionStorage会更高一些。
plugins/cache的代码 const sessionCache = { set (key, value) {if (!sessionStorage) { return}if (key != null && value != null) { sessionStorage.setItem(key, value)} }, get (key) {if (!sessionStorage) { return null}if (key == null) { return null}return sessionStorage.getItem(key) }, setJSON (key, jsonValue) {if (jsonValue != null) { this.set(key, JSON.stringify(jsonValue))} }, getJSON (key) {const value = this.get(key)if (value != null) { return JSON.parse(value)} }, remove (key) {sessionStorage.removeItem(key); }}const localCache = { set (key, value) {if (!localStorage) { return}if (key != null && value != null) { localStorage.setItem(key, value)} }, get (key) {if (!localStorage) { return null}if (key == null) { return null}return localStorage.getItem(key) }, setJSON (key, jsonValue) {if (jsonValue != null) { this.set(key, JSON.stringify(jsonValue))} }, getJSON (key) {const value = this.get(key)if (value != null) { return JSON.parse(value)} }, remove (key) {localStorage.removeItem(key); }}export default { /*** 会话级缓存*/ session: sessionCache, /*** 本地缓存*/ local: localCache} 3.2. 在系统中,不光是token需要存储到cookie中,像用户名、密码等简单的一些信息可能也需要保存到cookie中,那么也需要我们将这些信息保存到sessionStorage中,所以需要写一个公共的设置,统一的设置cookie的信息,具体代码如下: // 设置cookie的值 解决跨域的问题export function getCookie(key) { let value = ""; if (!Cookies.get(key)) {value = cache.session.get(key); } else {value = Cookies.get(key); } return value;}export function setCookie(key, value) { if (isDefaultLogin == "true") {cache.session.set(key, value); } return Cookies.set(key, value);}export function removeCookie(key) { cache.session.remove(key); return Cookies.remove(key);}下面是设置sessionStorage后的效果:
首先,Cookie、sessionStorage和localStorage都是用于在浏览器端存储数据的机制,但它们在用途、生命周期和存储容量等方面有一些区别。
Cookie:生命周期: 可以设置过期时间,可以是会话级的(浏览器关闭就失效)或持久性的(在指定过期日期前有效)。存储容量: 通常每个Cookie的大小受限制,一般为几KB。用途: 主要用于在客户端存储会话信息,如用户登录状态、购物车内容等。由于每次请求都会携带Cookie,可能会影响性能。 sessionStorage:生命周期: 存储在 session 中,页面会话结束时(例如关闭标签页或浏览器)数据被清除。存储容量: 比Cookie稍大,通常在5-10MB左右。用途: 适合临时保存一些页面会话期间需要用到的数据,不同页面之间无法共享。 localStorage:生命周期: 持久性的存储,除非被显式删除或页面被清除,否则数据将一直存在。存储容量: 比sessionStorage更大,通常在5-10MB左右。用途: 适合永久性地存储一些本地的用户设置、历史记录等信息,不同页面之间可以共享。 场景中的使用: Cookie: 适合在服务器和客户端之间传递小段数据,比如用户登录状态的保持,购物车信息等。 sessionStorage: 适合在同一个页面会话期间保持数据,比如表单临时数据,页面之间的传递。 localStorage: 适合永久性存储,如用户偏好设置、本地缓存数据等。 综上所述,选择使用哪种存储方式取决于你的需求,是临时性的、会话级的还是需要长期保存的。 4. 总结上述描述的内容就是我自己的解决方案,主要解决了谷歌浏览器高版本浏览器88或以上,引用iframe内嵌页面,因为浏览器的安全策略存在跨域,无法使用cookie获取到token信息,导致页面加载不出来的问题,还有其他的解决方案可以在下面给我留言,或者有不懂的地方也可以在下面留言,喜欢的话可以给个关注,会不定时的写一些在开发过程中遇到的一些问题^ - ^