微信扫码（4）

最新推荐文章于 2023-10-03 19:23:18 发布

天道酬勤@！

最新推荐文章于 2023-10-03 19:23:18 发布

阅读量118

点赞数

文章标签：后端

本文链接：https://blog.csdn.net/m0_55803538/article/details/124068194

版权

这个博客展示了在Vue.js应用中如何处理用户登录信息。`default.vue`页面的脚本涉及到从路由参数中获取`token`，并根据`token`调用API获取用户详细信息。用户信息存储在`loginInfo`对象中，使用cookie进行持久化管理。当用户登出时，会清除相关cookie并重定向到首页。

摘要由CSDN通过智能技术生成

1、修改default.vue页面脚本
1
export default {
2
data() {
3
return {
4
token: ‘’,
5
loginInfo: {
6
id: ‘’,
7
age: ‘’,
8
avatar: ‘’,
9
mobile: ‘’,
10
nickname: ‘’,
11
sex: ‘’
12
}
13
}
14
},
15
16
created() {
17
this.token = this.$route.query.token
18
if (this.token) {
19
this.wxLogin()
20
}
21
22
this.showInfo()
23
},
24
25
methods: {
26
showInfo() {
27
//debugger
28
var jsonStr = cookie.get(“guli_ucenter”);
29
if (jsonStr) {
30
this.loginInfo = JSON.parse(jsonStr)
31
}
32
},
33
34
logout() {
35
//debugger
36
cookie.set(‘guli_ucenter’, “”, {domain: ‘localhost’})
37
cookie.set(‘guli_token’, “”, {domain: ‘localhost’})
38
39
//跳转页面
40
window.location.href = “/”
41
},
42
43
wxLogin() {
44
if (this.token == ‘’) return
45
//把token存在cookie中、也可以放在localStorage中
46
cookie.set(‘guli_token’, this.token, {domain: ‘localhost’})
47
cookie.set(‘guli_ucenter’, ‘’, {domain: ‘localhost’})
48
//登录成功根据token获取用户信息
49
userApi.getLoginInfo().then(response => {
50
this.loginInfo = response.data.data.item
51
//将用户信息记录cookie
52
cookie.set(‘guli_ucenter’, this.loginInfo, {domain: ‘localhost’})
53
})
54
}
55
}
56
}