那些年踩过的 Vue 坑（1）

前言（此部分仅以记录写文章时的心情 2018-10-24）
之前作项目都是在其余人搭好的架子中谢谢业务代码，从未本身从 0 到 1 的完成过一个项目，今天有这样一个机会，也是换了新工做的第一个任务，但没有我想象中的那么顺利，最后仍是没能独立。

本身搭项目的过程

此次的任务是完成一个后台管理系统，TL 说对技术选型没有任何要求，因而就选择了 Vue，由于以前实习的时候有参与过相似项目的开发，并且市面上有一个比较好的前端管理后台集成解决方案（vue-element-admin），并且还有使用文档，能够直接修改后使用。
因而，
一、下载了基础模版，刚下完的文件目录结构以下：

二、开始修改配置文件，全局配置请求的域名

三、修改登陆模块的请求 API 接口，即修改文件夹 api 下的 login.js 文件，此时请求不能发送成功，而后修改了 request.js 中的这段代码：

四、把 headers 改为了 后端定义的 SESSION_TOKEN，并注释掉了下图中的代码：

五、根据问题一步一步查找，前后修改了 user.js、auth.js

最后项目的各类配置文件被改的坑愈来愈多，并且看起来很乱。。。

期间出现的问题

一、登陆请求发送成功，可是页面没有跳转
二、模板中有获取用户信息的 GetInfo，可是当前项目不须要，改代码的时候忽略了这一点

三、发送的请求未成功
四、token 不对

经排查发现的问题

一、后端定义的请求头 header 里面的 SESSION_TOKEN 字段名不符合规范

致使上述问题的主要缘由

一、当前项目不须要获取用户信息，忽略了 permission.js 里面的路由拦截，如下是修改以后的

二、有些请求参数传的不对（若是是 post 请求，参数可选时，须要传递一个空对象，不传会被视为 undefined，从而报错）
三、请求须要带 token，因为以前删改代码，token 存取的方式有点乱，即用了模版代码里状态管理里面的 setToken 方法，又本身存了 localStorage
四、后端定义的请求头 header 里面的 key 不符合规范，应使用 '-' 而不是 '_'

别人是怎么开始搭项目、解决问题的

1. 一样，下载基础模版；
2. 修改登陆模块请求的接口；
3. 由于这个集成方案用到了 vuex 状态管理，能够直接使用写好的方法获取或者设置 token，不须要特意存在 localStorage 里面；
4. 调试发现问题出现的点，当前项目没有用到“获取用户信息（GetInfo）”，在 permission.js 和相关状态管理文件中删除此部分相关代码，解决了登陆成功没法跳转页面问题；
5. 调试发现问题出现的点，发现 SESSION_TOKEN 字段名不符合规范，经后端改成 Session-Token，解决了请求列表接口时返回“未登陆”的状况；
6. 在 request.js 文件中，修改 拦截器 部分代码，全局拦截请求未发送成功的状况并给出相应提示，此处状态码需后台提供；
7. 正常修改路由，增长新页面；
8. 一些规范：公共请求写在文件夹 api 下面，其余页面相关的，在相应页面文件夹下建立 xx.service.js 文件

总结

1. 在用别人东西的时候，不要上来就改，更不要轻易删代码。先总体了解看明白，再考虑那些是须要改的，哪些是本身项目中不须要的
2. 遇到问题的时候必定要准确的定位出现问题的位置，才能更好的找到出现问题的缘由
3. Think more and then Do it!