vue-element-admin实现login和logout

【注】本篇文章介绍的是基于花裤衩（链接地址）的vue-element-admin模板改造的一个前端的后台管理系统解决方案，数据库运用的是（mysql）黑马教程的电商管理系统的.sql文件，操作步骤来自于网络资料和自己不断尝试的合集，感谢参考和建议！

---

克隆项目

去链接里面clone花裤衩的模板
基础模板: vue-admin-template
集成方案: vue-element-admin

去掉eslint

为避免以后运行项目报错，将package.json中的eslint文件都删掉（有4个），以最新版搜索结果为准

同时将下面这两个文件也删掉

安装依赖

终端命令行切换到当前目录，安装依赖：npm install、npm i、cnpm install、cnpm i。任选一个命令，cnpm更快一些

启动项目

运行npm run dev、cnpm run dev进入到登录界面

后端编写登录接口

由于我前面讲到这里借用的黑马的，我自己也不懂后端，就跳过了

修改baseurl

编辑.env.development文件

修改vue.config.js

进行的proxy的设置可以解决跨域问题

npm run dev重新运行，点击登录查看是否配置生效

成功的样式如下图实例：

实现登录

下面就开始疯狂的回推检索操作~

找到登录请求

找到目录/src/views/login/index，打开它，可以看到发送登录请求的操作
出现this.$store，看到这个东西就去store目录下面找东西

找到store中的user.js

找到目录/src/store/modules/user.js，打开它

找到login所对应的函数：

找到user的api

因为所有接口都来自于api，所以直接去/src/api中找user

发现api直接return 一个request，这又是啥操作，继续找request（【注】因为我们已经修改了baseurl，这里的请求url需要做相应的修改）

找到request模块

找到目录/src/utils/request.js

打开一开，原来request是封装好的axios，主要用来发送网络请求（【注】这里的验证状态，要根据自己api的返回结果来 做修改，例如我成功的返回状态是：res.meta.status === 200;提示信息是:res.meta.msg）

修改配置后，npm run dev重新启动

发现报错，没有定义一个东西

借鉴大佬的方法，直接将request注册到全局
在/src/main.js中注册request方法：

如果接口请求需要token，忽略对token的修改，这里是把token写死，访问接口会报错
注册全局后，发现接口可以访问，返回参数也正确，但点击登录不能跳转？？？
一步步回推，发现/src/store/modules/user.js中需要一个data

发现没有data，去mock中取一个死数据放过来
找到/mock/user.js

继续找token[username]

继续找“admin-token”

直接将这个数据拿过来，将/src/stroe/modules/user.js中的内容进行修改

token到这里结束
修改后，发现仍然报错404，又发现一个info接口，继续查查这个接口那里来的
全局搜索一下，发现在/src/api/usr.js中有一个getInfo接口

在/src/store/modules/user.js中也发现了getInfo的内容

大佬金句：

于是，展示修改：

然后，重新启动！！！终于终于…登录成功

实现退出登录

找到退出登录的操作按钮

/src/layout/components/Navbar.vue文件

【注】注销登录可以调用user/resetToken直接清除前端的cookie记录，不去与后端交互

定义resetToken这个方法

找到目录/src/store/modules/user.js

然后就发现退出登录这个功能就实现了！！！