【技术实现步骤摘要】
本专利技术涉及前端数据存储，尤其涉及一种基于vuex的前端安全存储方法。
技术介绍
1、随着人们对信息数据安全的越来越重视，前端暴露式存储信息的方式也需要去弥补，不然直接存储在浏览器的网站数据信息就会被人利用窃取其他更重要的网站信息。前端开发者在开发应用程序时应该采取合适的措施来保护用户的个人数据和敏感数据信息，确保这些信息不会被未经授权的第三方访问或窃取就显得尤为重要。
2、目前前端存储数据的方式主要有localstorage、sessionstorage、cookie三种方式，这三种方式都是把数据信息存储在浏览器中，在浏览器中可以直观看到并修改这就会导致信息暴露，威胁到网站其他数据信息安全。(例如专利cn113641939a数据安全处理方法、浏览器系统、电子设备及存储介质)需要预先构建的浏览器安全执行环境，对所述网页代码进行解析和执行；并且，通过所述浏览器安全执行环境，在所述网页代码执行过程中，检测并滤除超出所述对浏览器数据的访问权限信息所指示的权限的访问操作，相对于本专利基于vuex存储前端数据来说，既复杂还需要一定技术层面的支持才能实现。(cn115373593a一种基于vuex的数据存取方法及系统)此专利主要利用vuex存储技术减少了对原数据成员的繁琐处理，不需要重复增加相似的冗余代码，已达到便捷高效的目的。
3、vuex是一个专为vue应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，可以解决多组件数据通信问题。vue是一套用于构建用户界面的渐进式前端开发框架。本专利主要利用
技术实现思路
1、本专利技术的目的就在于为了解决前端网站数据信息直接存储在浏览器，导致敏感的信息直接暴露，给网站数据带来一定的安全问题而提供一种基于vuex的前端安全存储方法，本专利技术利用vuex存储，解决了系统存储信息直接暴露在浏览器的问题。
2、本专利技术通过以下技术方案来实现上述目的：
3、一种基于vuex的前端安全存储方法，包括以下步骤：
4、步骤1，在vue工程项目里，使用npminstall vuex命令安装vuex；
5、步骤2，在代码结构的src目录下创建store.js文件，并引入vuex插件，importvuex from'vuex'，用于vuex功能管理；
6、步骤3，在main.js里面导入store.js文件，import store from'./store'，在其他文件里，通过this.$store来获取store对象；
7、然后将数据信息存储变量全部定义到store.js文件中的state中，把操作数据信息的逻辑函数定义并实现到store.js文件中action(行动)中，把变量赋值功能函数定义到mutations(变数集合)中；
8、步骤4，把登录接口请求回来的数据信息通过store.js里action中函数进行数据分离与处理，然后通过store.js中mutations里的存储函数把数据写进state里，以方便后续需要的地方调用；
9、步骤5，在app文件里做页面刷新时的数据备份处理及更新操作，在app的created文件里进行代码备份存储到sessionstorage里，在mounted里把sessionstorage里的数据调用action里的存储函数在存回store.js里的state中，然后删除sessionstorage里的备份数据；
10、步骤6，在退出和重新登录系统操作的时候要通过store.js中mutations里的清除函数对store.js里的state数据进行清除操作。
11、进一步方案为，所述步骤2中，在vuex文件夹中创建store.js文件，用于整合后期所有创建的vuex文件。
12、进一步方案为，所述步骤3中，根据vuex存储文档，在vue初始化启动的时候把state仓库的实例注入所有的子组件。
13、进一步方案为，所述步骤4中，系统菜单权限的控制，需要根据返回的权限数据来控制显示出哪些菜单，操作按钮的权限控制，需要根据返回的权限数据来控制显示哪些操作按钮，还有用户登录后的基本信息。
14、本专利技术的有益效果在于：
15、本专利技术的一种基于vuex的前端安全存储方法，通过使用vuex内存存储，数据在浏览器中就不会被暴露，避免了数据存储在localstorage或者sessionstorage、cookie里被用户看见和篡改。如果把这些信息存储在localstorage里和cookie里，就会把信息留在浏览器上，即使关闭了浏览器，下次在进网站仍然可以看到。sessionstorage存的数据信息会随着浏览器的关闭而清除，不同窗口下的sessionstorage存储相互独立，而且存储的数据信息也是完全暴露在浏览器的，容易被人篡改使用；本专利技术使用vuex内存存储在浏览器中完全看不到，也不能编辑，这样就不容易被人利用和篡改，增加了系统的安全性。
本文档来自技高网...【技术保护点】
1.一种基于vuex的前端安全存储方法，其特征在于，包括以下步骤：
2.如权利要求1所述的一种基于vuex的前端安全存储方法，其特征在于，所述步骤2中，在Vuex文件夹中创建store.js文件，用于整合后期所有创建的vuex文件。
3.如权利要求1所述的一种基于vuex的前端安全存储方法，其特征在于，所述步骤3中，根据vuex存储文档，在Vue初始化启动的时候把state仓库的实例注入所有的子组件。
4.如权利要求1所述的一种基于vuex的前端安全存储方法，其特征在于，所述步骤3中，然后将数据信息存储变量全部定义到store.js文件中的state中，把操作数据信息的逻辑函数定义并实现到store.js文件的action中，把变量赋值功能函数定义到mutations中。
5.如权利要求1所述的一种基于vuex的前端安全存储方法，其特征在于，所述步骤4中，系统菜单权限的控制，需要根据返回的权限数据来控制显示出哪些菜单，操作按钮的权限控制，需要根据返回的权限数据来控制显示哪些操作按钮，还有用户登录后的基本信息。
【技术特征摘要】
1.一种基于vuex的前端安全存储方法，其特征在于，包括以下步骤：
2.如权利要求1所述的一种基于vuex的前端安全存储方法，其特征在于，所述步骤2中，在vuex文件夹中创建store.js文件，用于整合后期所有创建的vuex文件。
3.如权利要求1所述的一种基于vuex的前端安全存储方法，其特征在于，所述步骤3中，根据vuex存储文档，在vue初始化启动的时候把state仓库的实例注入所有的子组件。
4.如权利要求1所述的一种基于vuex的前端...
【专利技术属性】
技术研发人员：王洪贺，杜科，
申请(专利权)人：四川启睿克科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。