折腾了好几天值得记录一下,用的是花裤衩的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 requests
timeout: 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-login
MessageBox.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 login
login({ commit }, userInfo) {
const { username, password } = userInfo
console.log('打印response 前');
return new Promise((resolve, reject) => {
login({ account: username.trim(), password: password }).then(response => {
console.log('打印response',response);
this.dd = response
const {result} = response
2.注释掉getInfo和logout引用
注释掉getInfo,改用自建函数给头像和用户分组赋值
src根目录下permission
if (hasToken) {
if (to.path === '/login') {
// if is logged in, redirect to the home page
next({ path: '/' })
NProgress.done()
} else {
const hasGetUserInfo = store.getters.name
console.log('print hasGetUserInfo------->', hasGetUserInfo);
if (hasGetUserInfo) {
next()
} else {
try {
// get user info
console.log('permission userinfo');
// await store.dispatch('user/getInfo') //去掉这一行之后竟然可以登陆了
await store.dispatch('user/login2') //这是自建函数,给头像和用户分组赋值
console.log('permission userinfo222222222222');
自建函数, 给头像和用户分组赋值 store/modules/user.js
// test
login2() {
console.log('this is a test ----------------->', this.dd);
//设置头像和用户权限
const name = this.dd.result.bname
const avatar = this.dd.result.headUrl
//
state.name = name
state.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修改为自己的登录接口
【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 login
login({ commit }, userInfo) {
const { username, password } = userInfo
console.log('打印response 前');
return new Promise((resolve, reject) => {
login({ account: username.trim(), password: password }).then(response => {
console.log('打印response',response);
this.dd = response
const {result} = response
console.log('print data',result);
commit('SET_TOKEN', result.token)
setToken(result.token)
console.log('token------------------');
//设置头像和用户权限
const name = response.result.bname
const avatar = response.result.headUrl
//
this.state.name = name
state.avatar = avatar
console.log('记录state.name',this.state.name,state.avatar, name, avatar, response);
resolve()
}).catch(error => {
'print catch error'.log
reject(error)
})
})
},
// test
login2() {
console.log('this is a test ----------------->', this.dd);
//设置头像和用户权限
const name = this.dd.result.bname
const avatar = this.dd.result.headUrl
//
state.name = name
state.avatar = avatar
},
// get user info
getInfo({ 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.bname
const 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 logout
logout({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
removeToken() // must remove token first
resetRouter()
commit('RESET_STATE')
resolve()
}).catch(error => {
reject(error)
})
})
},
// remove token
resetToken({ commit }) {
return new Promise(resolve => {
removeToken() // must remove token first
commit('RESET_STATE')
resolve()
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}