Vue-Element-Admin集成自己的接口实现登录跳转


Posted in Vue.js onJune 23, 2021

1、先看一下请求配置文件,看axios.create这个方法,baseURL是基础路由

baseURL:process.env.VUE_APP_BASE_API,

路径:src-utils-request.js

Vue-Element-Admin集成自己的接口实现登录跳转

2、然后再看service.interceptors.request.use,设置token请求头,我后端集成的是jwt,所以请求头是Authentication,如图

config.headers['Authentication'] = getToken()

Vue-Element-Admin集成自己的接口实现登录跳转

3.设置自己的状态码,看service.interceptors.response.use,如图,设置为自己的状态码

Vue-Element-Admin集成自己的接口实现登录跳转

这是我服务器响应的数据,如下,1是正常响应数据

{
    "code": 1,
    "data": {
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJBY2NvdW50SWQiOiJhZG1pbiIsIm5iZiI6MTYyNDE3NTM4MiwiZXhwIjoxNjI0MTc1NDQyLCJpYXQiOjE2MjQxNzUzODJ9.7p8EHMx1b4-yIMRN7Qxden3nZsDmBvevHEf-3oVhFMg",
    "message": "登录成功",
    "state": true
    }
}

4、改.env.production和.env.development里面的api都为空,图只展示.env.production

Vue-Element-Admin集成自己的接口实现登录跳转

5、改基础路由配置,在devServer后面添加如下代码(before这行注释掉,这个用来模拟数据的,用不到),如图

// before: require('./mock/mock-server.js')
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: 'https://xiaoxingbobo.top',
        // target: 'http://192.168.1.119:8081',
        // target: 'http://192.168.1.253:8081',
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }

Vue-Element-Admin集成自己的接口实现登录跳转

到这里基础路由基本配置好了

6、在src-view-login-index.html文件中,找到Vue-Element-Admin的登录接口,添加如下代码,如图,把官方的请求方式注释掉,this.loginForm是请求参数

this.loading = true
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
              this.loading = false
            })
            .catch((e) => {
              this.tool.log(e)
              this.loading = false
            })

Vue-Element-Admin集成自己的接口实现登录跳转

7、设置用户登录成功后的跳转,登录后必须把token做缓存,不然登录页跳转不了

在src-store-moduls-use.js,如图

Vue-Element-Admin集成自己的接口实现登录跳转

找到action下的login方法,修改代码如下

const actions = {
  // user login
  login({
    commit
  }, userInfo) {
    const {
      accountId,
      password
    } = userInfo
 
    return new Promise((resolve, reject) => {
      console.log('userInfo', userInfo)
      //服务器需要的登录参数
      const payload = {
        accountId: accountId,
        password: password
      }
      //请求服务器
      user.login(payload).then(response => {
        const {
          data
        } = response
        console.log('response', response)
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

找到getInfo方法,修改代码如下,因为获取用户信息接口没写,所以数据直接写死,根据自己的做调整

getInfo({
    commit,
    state
  }) {
    return new Promise((resolve, reject) => {
      /**
       * 这里请求用户信息和权限,目前接口没做,只注释了,data写死
       * */
      // user.getInfo(state.token).then(response => {
      // const {
      //   data
      // } = response
      const {
        data
      } = {
        data: {
          roles: ['admin'],
          introduction: 'Administrator',
          avatar: 'https://cloud.xiaoxingbobo.top/nongzhibang/20210429/1107491622257669573',
          name: 'administrator'
        }
      }
 
      if (!data) {
        reject('Verification failed, please Login again.')
      }
 
      const {
        roles,
        name,
        avatar,
        introduction,
        token
      } = data
 
      // roles must be a non-empty array
      if (!roles || roles.length <= 0) {
        reject('getInfo: roles must be a non-null array!')
      }
 
      commit('SET_ROLES', roles)
      commit('SET_NAME', name)
      commit('SET_AVATAR', avatar)
      commit('SET_INTRODUCTION', introduction)
      commit('SET_TOKEN', token)
      resolve(data)
      // }).catch(error => {
      //   reject(error)
      // })
    })
  },

这样就搞定了Vue-Element-Admin,可以登录到首页了

Vue-Element-Admin集成自己的接口实现登录跳转

到此这篇关于Vue-Element-Admin集成自己的接口实现登录跳转的文章就介绍到这了,更多相关Vue-Element-Admin登录跳转内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
一篇超完整的Vue新手入门指导教程
Nov 18 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
vuex的使用步骤
Jan 06 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
关于vue-router-link选择样式设置
Apr 30 Vue.js
vue使用element-ui按需引入
May 20 Vue.js
Vue + iView实现Excel上传功能的完整代码
Vue vee-validate插件的简单使用
Jun 22 #Vue.js
vue3使用vue-router的完整步骤记录
一篇文章学会Vue中间件管道
Jun 20 #Vue.js
Vue过滤器(filter)实现及应用场景详解
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 #Vue.js
You might like
php简单分页类实现方法
2015/02/26 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
Yii使用DbTarget实现日志功能的示例代码
2020/07/21 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python 的 with 语句详解
2014/06/13 Python
python错误处理详解
2014/09/28 Python
python求crc32值的方法
2014/10/05 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
tensorflow实现简单逻辑回归
2018/09/07 Python
Python查找数组中数值和下标相等的元素示例【二分查找】
2019/02/13 Python
请说出你所知道的线程同步的方法
2013/04/19 面试题
技校毕业生的自我评价
2013/12/27 职场文书
费用会计岗位职责
2014/01/01 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
获奖感言一句话
2015/07/31 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers