接上一篇,本篇以Vue3 + elementplus + axios 制作一个前段界面来测试使用
实现一个简单的登录登出,请求API效果
一:最终效果
1.登录过程
axios.post('/auth/login', {
username: form.username, password: form.password })
.then(response => {
if (response.data.code !== 0) {
ElMessage.warning(`登陆失败: ${
response.data.msg}`)
} else {
// 登录成功设置两个本地localStorage分别存放token 和 username(也可以附加其他信息)
localStorage.setItem('token', response.data.data);
localStorage.setItem('username', form.username);
username.value = form.username;
ElMessage.info(`${
form.username}登陆成功!`)
}
})
.catch(err => {
console.log(err)
ElMessage.error(err)
})
2.请求后端过程
// 关键在于添加http头'Authorization': 'Bearer ' + localStorage.getItem('token')
axios.get('/api/test', {
headers: {
'Authorization': 'Bearer ' + localStorage.getItem('token') } })
.then(response => {
if (response.data.code !== 0) {
ElMessage.warning(`获取: ${
response.data.msg}`)
}