修改element-ui-template 登录接口 api login

折腾了好几天值得记录一下，用的是花裤衩的element-ui-template模板，后台接口是公司写好的。

难点主要在登录和获取用户信息，和模板上的有出入，公司的登录api请求后直接返回token、用户分组、用户头像，不用再次请求用户信息。

退出时，公司的后端没有token销毁接口，由浏览器直接销毁。

1.修改登录接口

在api/user中找到login函数

import request from '@/utils/request'export function login(data) {return request({url: '/v1/business/login', //改成你的接口method: 'post',data,})
}

修改.env.development文件中BASE_API为空

# just a flag
ENV = 'development'# base api
VUE_APP_BASE_API = '' //这里改为空

修改utils/request.js中BASE_URL和状态码

// create an axios instance
const service = axios.create({baseURL: 'http://47.105.172.000/serverPensionAdmin/api', // 改成你自己的 //url = base url + request url// withCredentials: true, // send cookies when cross-domain requeststimeout: 5000 // request timeout
})

改状态码

response => {const res = response.data// if the custom code is not 20000, it is judged as an error.if (res.httpCode !== 200) {Message({message: res.message || 'Error',type: 'error',duration: 5 * 1000})// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;if (res.code === 50008 || res.code === 50012 || res.code === 50014) {// to re-loginMessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {confirmButtonText: 'Re-Login',cancelButtonText: 'Cancel',type: 'warning'}).then(() => {store.dispatch('user/resetToken').then(() => {location.reload()})})}return Promise.reject(new Error(res.message || 'Error'))} else {return res}},

在utils/validate中修改允许登录的用户名

export function validUsername(str) {const valid_map = ['admin', 'editor', 'yufeng'] //原来只允许两个，yufeng是我加上去的，根据实际情况修改return valid_map.indexOf(str.trim()) >= 0
}

修改登录字段，如果你的登录字段为username和password就不用修改，恰好我的登录字段为account，因此需要修改下，store/modules/user

 // user loginlogin({ commit }, userInfo) {const { username, password } = userInfoconsole.log('打印response 前');return new Promise((resolve, reject) => {login({ account: username.trim(), password: password }).then(response => {console.log('打印response',response);this.dd = responseconst  {result}  = response

2.注释掉getInfo和logout引用

注释掉getInfo，改用自建函数给头像和用户分组赋值
src根目录下permission

if (hasToken) {if (to.path === '/login') {// if is logged in, redirect to the home pagenext({ path: '/' })NProgress.done()} else {const hasGetUserInfo = store.getters.nameconsole.log('print hasGetUserInfo------->', hasGetUserInfo);if (hasGetUserInfo) {next()} else {try {// get user infoconsole.log('permission userinfo');// await store.dispatch('user/getInfo')   //去掉这一行之后竟然可以登陆了await store.dispatch('user/login2') //这是自建函数，给头像和用户分组赋值console.log('permission userinfo222222222222');

自建函数, 给头像和用户分组赋值 store/modules/user.js

// testlogin2() {console.log('this is a test ----------------->', this.dd);//设置头像和用户权限const name = this.dd.result.bnameconst avatar = this.dd.result.headUrl//state.name = namestate.avatar = avatar},

因为不用请求退出api，所以在layout/components/Navbar.vue中，注释掉logout函数，直接用本地清除token的方式，

methods: {toggleSideBar() {this.$store.dispatch('app/toggleSideBar')},async logout() {// await this.$store.dispatch('user/logout') 请求登出api,因为后台pc端暂时不用请求退出api,直接清掉token即可退出await this.$store.dispatch('user/resetToken')this.$router.push(`/login?redirect=${this.$route.fullPath}`)}}
}

至此，登陆问题解决，上图

[在这里插入图片描述](https://imgconvert.csdnimg.cn/aHR0cHM6Ly90dmExLnNpbmFpbWcuY24vbGFyZ2UvMDA3UzhaSWxseTFnaGJkb3JobzFvajMwc3kwdGN3bmguanBn?x-oss-process=image/format,png =200x200)

参考文章
vue-element-admin-master修改为自己的登录接口

Promise resolve()的用法

【vue】前端必须掌握的登陆 token 处理（ Vue 登陆处理 token 的补充）

在Vuex使用以及 dispatch和commit来调用mutations的区别

store/module/user.js

有需要的同学可以参考下

import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'const getDefaultState = () => {return {token: getToken(),name: '',avatar: ''}
}const state = getDefaultState()const dd = {}const mutations = {RESET_STATE: (state) => {Object.assign(state, getDefaultState())},SET_TOKEN: (state, token) => {state.token = token},SET_NAME: (state, name) => {state.name = name},SET_AVATAR: (state, avatar) => {state.avatar = avatar}
}const actions = {// user loginlogin({ commit }, userInfo) {const { username, password } = userInfoconsole.log('打印response 前');return new Promise((resolve, reject) => {login({ account: username.trim(), password: password }).then(response => {console.log('打印response',response);this.dd = responseconst  {result}  = responseconsole.log('print data',result);commit('SET_TOKEN', result.token)setToken(result.token)console.log('token------------------');//设置头像和用户权限const name = response.result.bnameconst avatar = response.result.headUrl//this.state.name = namestate.avatar = avatarconsole.log('记录state.name',this.state.name,state.avatar, name, avatar, response);resolve()}).catch(error => {'print catch error'.logreject(error)})})},// testlogin2() {console.log('this is a test ----------------->', this.dd);//设置头像和用户权限const name = this.dd.result.bnameconst avatar = this.dd.result.headUrl//state.name = namestate.avatar = avatar},// get user infogetInfo({ commit, state }) {console.log('is reached here');return new Promise((resolve, reject) => {getInfo(this.dd).then(response => {console.log('print getinfo response');// const { data } = response// if (!data) {//   return reject('Verification failed, please Login again.')// }//console.log('bname');const name = response.bnameconst avatar = response.headUrl//// commit('SET_NAME', name)// commit('SET_AVATAR', avatar)// console.log('have set avtar');// resolve(data) 注释后不往外传数据}).catch(error => {console.log('get info have error');reject(error)})})},// user logoutlogout({ commit, state }) {return new Promise((resolve, reject) => {logout(state.token).then(() => {removeToken() // must remove  token  firstresetRouter()commit('RESET_STATE')resolve()}).catch(error => {reject(error)})})},// remove tokenresetToken({ commit }) {return new Promise(resolve => {removeToken() // must remove  token  firstcommit('RESET_STATE')resolve()})}
}export default {namespaced: true,state,mutations,actions
}