那些年踩过的 Vue 坑（1）

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

自己搭项目的过程

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

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

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

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

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

最后项目的各种配置文件被改的坑越来越多，而且看起来很乱。。。

期间出现的问题

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

3、发送的请求未成功
4、token 不对

经排查发现的问题

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

导致上述问题的主要原因

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

2、有些请求参数传的不对（如果是 post 请求，参数可选时，需要传递一个空对象，不传会被视为 undefined，从而报错）
3、请求需要带 token，由于之前删改代码，token 存取的方式有点乱，即用了模版代码里状态管理里面的 setToken 方法，又自己存了 localStorage
4、后端定义的请求头 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!