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中通过render函数给子组件设置ref操作
Nov 17 Vue.js
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
vue实现简易音乐播放器
Aug 14 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
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
2013/08/23 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
Python深入学习之闭包
2014/08/31 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
numpy中的高维数组转置实例
2018/04/17 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
华三通信H3C面试题
2015/05/15 面试题
四年大学生活的个人自我评价
2013/12/11 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
寄语是什么意思
2014/04/10 职场文书
关于工作经历的证明书
2014/10/11 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
导游词格式
2015/02/13 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android