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+iview实现文件上传
Nov 17 Vue.js
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
vue中如何自定义右键菜单详解
Dec 08 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
vue实现登陆页面开发实践
May 30 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面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
Javascript模块模式分析
2008/05/16 Javascript
JQuery从头学起第三讲
2010/07/06 Javascript
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
js如何找出字符串中的最长回文串
2018/06/04 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
python字符串Intern机制详解
2019/07/01 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
ORACLE第二个十问
2013/12/14 面试题
介绍一下write命令
2014/08/10 面试题
《纸船和风筝》教学反思
2014/02/15 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
南京导游词
2015/02/03 职场文书
质检员岗位职责
2015/02/03 职场文书