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 25 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 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实现图片简单上传
2006/10/09 PHP
PHP学习之正则表达式
2011/04/17 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
PHP获得数组交集与差集的方法
2015/06/10 PHP
php实现求相对时间函数
2015/06/15 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
经验几则 推荐
2006/09/05 Javascript
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
javascript IFrame 强制刷新代码
2009/07/23 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
Python打印斐波拉契数列实例
2015/07/07 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
如何利用python发送邮件
2020/09/26 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
个人简历自我评价范文
2014/02/04 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
外贸英文求职信范文
2015/03/19 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
pytorch MSELoss计算平均的实现方法
2021/05/12 Python