vue-element-admin 搭建步骤(二)登录配置

前面的项目搭建步骤可以看我的上一篇博文，vue-element-admin 搭建步骤(一)

https://blog.csdn.net/qq_39793857/article/details/113601715

下面我们就开始登录和后端对接的配置改造

目前我的版本是最新的4.3.1

一丶先删除package.json下的eslint

下面的两个文件也删掉

二丶在vue.config.js文件中配置代理并将原本的mock代理

before: require('./mock/mock-server.js')

注释掉

最新版的里面并没有proxy，所有需要代理就加上去

 proxy:{
      [process.env.VUE_APP_BASE_API]:{
        target:`http://你的后台ip地址:端口`,
        changeOrigin: true,
        pathRewrite:{
          ['^'+process.env.VUE_APP_BASE_API] :''
        }
      }
    },

三丶现在使用的是 development测试，所以需要将.env.development改一下

四丶下面开始配置请求返回操作之前，先清楚自己后台成功的返回内容，我这里返回的code是200(且返回内容不包裹在data下的)

这里是拦截请求返回的地方，将这里改成200  (按照你们的后端返回code值改)

五丶更改请求地址和参数

我这里只改动了login(登录)和logout(登出)，getInfo获取用户信息我这里暂时没有使用

logout方法这里，我加了headers:{token:token}

因为我的后台接口是从请求头里面获取到token的，获取之后的操作当然是比对redis是否存在然后删除key了

下面的就是我后台的登录和登出接口

六丶更改返回接收的后续操作(login)

下面的蓝色框框里面的是写死的登录数据，在mock/user.js里面 （直接复制到蓝色框框的地方），后续需要使用到getInfo的时候再重新改造

七丶测试登录和登出

退出之后再使用一个错误的密码登录试试，用户账号或密码错误   就是我后台验证失败后返回的

有的其他请求进入后台报错暂时不管，目前和后台对接的登录登出和验证操作算是结束了。

有疑问的可以评论一起讨论

 

 

参考博文：https://blog.csdn.net/weixin_43764814/article/details/101315585