实际开发中的风趣bug：“undefined“ is not valid JSON SyntaxError: “un ...

bug解读：

       指出在尝试剖析或序列化 JSON 数据时遇到了题目。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，它要求数据必须是有用的 JSON 格式。在 JavaScript 中，undefined 是一个特殊的值，表现变量没有被赋值，它不是一个有用的 JSON 值。
场景：

        在后台项目，用户登录后，通过用户的菜单权限渲染侧边栏菜单，做了持久化存储。当登出后，在登录页刷新页面，就报错了。
分析与办理：

首先知道了报错原因，以是在mutations存数据的时间，做了一下兼容：

1. // let menu = JSON.stringify(val, (key, value) =>{
2.       //     if(value === undefined){
3.       //         return null
4.       //     }
5.       //     return value
6. // })
7. // Cookie.set('menu', menu)

复制代码

发现并没有用。
然而，假如改成在侧边栏组件中，获取menu的时间做兼容：
~computed:

1. menu(){
2.     // 判断当前数据，如果缓存中没有，就去当前store中获取
3.     // 有个问题，如果把JSON.parse(Cookie.get('menu'))定义在当前store中兼容，数据是可以获取到，但是回到登录页刷新就会报错：
4.     //    "undefined" is not valid JSON   SyntaxError: "undefined" is not valid JSON
5.     // 而在这里做兼容，在登录页刷新时就不会报错  
6.     console.log('menu', JSON.parse(Cookie.get('menu')) );
7.     return JSON.parse(Cookie.get('menu')) ||  this.$store.state.tab.menu
8.                         }

复制代码

这样同样情况下，登出后在登录页刷新就不会报错。为什么呢？！
原来，是因为整个项目在初始化的时间，会跑一遍vuex，因为还没登陆，还没菜单数据，以是在tab.js中初始化menu的时间，JSON.parse(Cookie.get('menu'))的时间，Cookie.get('menu')的值是一个undefined，而JSON.parse('undefined')就会报那个错误："undefined" is not valid JSON SyntaxError: "undefined" is not valid JSON。
验证：

在控制台中，输入JSON.parse('undefined')确实会复现这个错误。

 

但是，为什么在侧边栏组件，初始化menu值的时间就不报错，另有为什么已经在cookie存储menu的时间做兼容时，都没用呢？
是因为①，还没登录，压根没跑到侧边栏组件，没用到该menu方法，以是不报错；②，在tab.js中，也没有跑到mutations中的setMenu方法，以是一下的兼容没用。

1. // let menu = JSON.stringify(val, (key, value) =>{
2.     //     if(value === undefined){
3.     //         return null
4.     //     }
5.     //     return value
6. // })
7. // Cookie.set('menu', menu)

复制代码

办理： 

实在一开始发现 JSON.parse('undefined') 会报该错误，就可以在store的state中获取menu的时间做判定：
        ~tab.js: ==> state

1. menu: Cookie.get('menu') ? JSON.parse(Cookie.get('menu')) : []

复制代码

这样bug就办理啦。 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。