vue-element-admin登录详解,vue-element-admin部署
关于这个vue-元素-管理中的流程可能对于新的同学不是很友好，所以本文将结合实例代码，介绍vue-元素-管理集成自己的接口实现登录跳转，感兴趣的小伙伴们可以参考一下
1、先看一下请求配置文件，看axios.create这个方法，baseURL是基础路由
基本URL:进程。环境。vue _ APP _ BASE _ API，
路径：src-utils-request.js
2、然后再看service.interceptors.request.use，设置token请求头，我后端集成的是jwt，所以请求头是Authentication，如图
配置。headers[ authentic ation ]=getToken()
3.设置自己的状态码，看service.interceptors.response.use，如图，设置为自己的状态码
这是我服务器响应的数据，如下，1是正常响应数据
{
代码:1,
数据:{
token : eyjhbgcioijuzi 1 nisinr 5 CCI 6 ikpxvcj 9。 eyjby 2 nvdw 50 swqioijhzg 1 pbiisim 5 izii 6 mtyynde3n TM 4 iwizxhwijoxnji 0 mt C1 nd qylcjpyxqioj 2 mjqxnzzuzodj 9.7 p 8 ehmx 1 b 4-yi mrn 7 qx den 3 nzsdmbevhef-3 ov fmg ，
消息":"登录成功，
状态：真
}
}
4、改.env.production和.env.development里面的api都为空，图只展示.env.production
5、改基础路由配置，在devServer后面添加如下代码（before这行注释掉，这个用来模拟数据的，用不到），如图
//before: require( ./mock/mock-server.js )
代理服务器：{
【流程。环境。vue _ APP _ BASE _ API]:{
目标： https://xiaoxingbobo.top ，
//目标： 3358192.168.1.119:8081 ,
//目标： http://192。168 .1 .253:8081 ,
更改来源：真的，
路径重写：{
[^进程。环境。vue _ app _ base _ API]:
}
}
}
到这里基础路由基本配置好了
6、在src-view-login-index.html文件中，找到Vue-Element-Admin的登录接口，添加如下代码，如图，把官方的请求方式注释掉，this.loginForm是请求参数
this.loading=true
这个. store.dispatch(用户/登录，this.loginForm)。然后(()={
这个1000美元路由器。推({ path:这个。redirect /，query: this.otherQuery })
this.loading=false
})。catch((e)={
this.tool.log
this.loading=false
})
7、设置用户登录成功后的跳转，登录后必须把token做缓存，不然登录页跳转不了
在src-store-moduls-use.js，如图
找到action下的login方法，修改代码如下
常量操作={
//用户登录
登录({
犯罪
}，userInfo) {
常数{
帐户Id，
密码
}=用户信息
返回新承诺((解决，拒绝)={
console.log(userInfo ，userInfo)
//服务器需要的登录参数
常量有效负载={
帐户Id:帐户Id，
密码：密码
}
//请求服务器
用户登录(有效负载)。然后(响应={
常数{
数据
}=响应
console.log(响应，响应)
提交(设置令牌，数据令牌)
塞托肯(数据。令牌)
解决()
}).接住(错误={
拒绝（错误)
})
})
},
找到getInfo方法，修改代码如下，因为获取用户信息接口没写，所以数据直接写死，根据自己的做调整
getInfo({
提交，
状态
}) {
返回新承诺((解决，拒绝)={
/**
* 这里请求用户信息和权限，目前接口没做，只注释了，数据写死
* */
//user.getInfo(state.token).然后(响应={
//常量{
//数据
//}=响应
常数{
数据
}={
数据：{
角色：[admin]，
简介："管理员",
头像： https://云。小星波波。top/农之邦/2021 04 29/1107491622257669573 ，
姓名："管理员"
}
}
如果(!数据){
拒绝(验证失败，请重新登录。)
}
常数{
角色，
姓名，
阿凡达，
简介，
代币
}=数据
//角色必须是非空数组
如果(!roles roles.length=0) {
拒绝( getInfo:角色必须是非空数组!)
}
提交( SET_ROLES ，角色)
提交(集合名称，名称)
提交( SET_AVATAR ，头像)
提交( SET_INTRODUCTION ，简介)
提交(设置令牌，令牌)
解析（数据)
//}).接住(错误={
//拒绝（错误)
//})
})
},
这样就搞定了vue-元素-管理，可以登录到首页了
到此这篇关于vue-元素-管理集成自己的接口实现登录跳转的文章就介绍到这了，更多相关vue-元素-管理登录跳转内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。