「这是我参与11月更文挑战的第27天,活动详情查看:2021最后一次更文挑战」
前言
前面完成了后端的登录,退出登录,获取token信息的逻辑,现在要对接这些后端接口,整体调试。
修改全局请求配置
全局请求配置位置在src/utils/reqeusts.js
,这里有一个可以叫拦截器,前端所有的请求响应都会在这里。 后端的接口消息同一都是msg
,而这个文件里面是message
,需要修改,不然后端的报错前端显示不出来。vue-admin-template
默认鉴权失败状态码为50008,50012,假如改后端的状态码Gin框架会报错,会说不符合规范,我统一改成50X:,默认的MessageBox.confirm
token过期弹框我改成中文内容:
response => {
const res = response.data
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 200) {
Message({
message: res.msg || 'Error',
type: 'error',
duration: 5 * 1000
})
// 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
if (res.code === 401) {
// to re-login
MessageBox.confirm('登录状态已经过期', '登录已过期', {
confirmButtonText: '重新登陆',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
}
return Promise.reject(new Error(res.msg || 'Error'))
} else {
return res
}
},
error => {
Message({
message: error,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
复制代码
实现的效果:
故意登录失败:
故意使token失效请求数据接口:
最终要是被拦截了
登录设置token
登陆过后所有的请求都需要设置token,文件位置:src/store/modules/user.js
: 这些token最终被存在cookie:
const actions = {
// user login
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(response => {
const { data } = response
commit('SET_TOKEN', data)
setToken(data)
resolve()
}).catch(error => {
reject(error)
})
})
},
复制代码
成功后登录的数据库的数据:
每次接口请求token验证成功后,后端逻辑都会对token过期时间增加7200秒,也就是两个小时。首次登录会对没有的token的账号进行生成token然后返回token给前端保存到cookie中。
接下来的所有的接口的请求头header都会携带这个token:
用户信息显示
需要显示一个右上角的信息,那就涉及到了info接口,文件位置在:src/store/modules/user.js
根据接口字段改成大写
// get user info
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
const { data } = response
if (!data) {
return reject('Verification failed, please Login again.')
}
const { Name, Avatar } = data
commit('SET_NAME', Name)
commit('SET_AVATAR', Avatar)
resolve(data)
}).catch(error => {
reject(error)
})
})
},
复制代码
总结
前端主要是针对后端的格式进行调整,修改字段的大小写和状态码,还有一个英文调试信息改成中文,都很简单。因为在登录的时候为了安全问题,主要逻辑都在后端处理,前端所有的代码都在用户面前,其实还有优化的地方,例如验证码,robots文件,验证码密码强度,为了快速上线的确省略了很多地方,虽说简单但是还是全部使自己的实现了基本所有的代码,知道了基本所有细节,学到东西了,下篇准备把这个完善后台CI脚本,真实上线。