Skip to content

Commit 3b4e4c7

Browse files
nk-akunnk-akun
committed
feat: keep login status
1 parent 312c1d1 commit 3b4e4c7

File tree

2 files changed

+325
-0
lines changed

2 files changed

+325
-0
lines changed

‎site/pages/user/signin.vue‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
<template>
2+
<section class="main">
3+
<div class="container">
4+
<div class="main-body no-bg">
5+
<div class="widget signin">
6+
<div class="widget-header">登录</div>
7+
<div class="widget-content">
8+
<div class="field">
9+
<label class="label">用户名/邮箱</label>
10+
<div class="control has-icons-left">
11+
<input
12+
v-model="username"
13+
class="input is-success"
14+
type="text"
15+
placeholder="请输入用户名或邮箱"
16+
@keyup.enter="submitLogin"
17+
/>
18+
<span class="icon is-small is-left">
19+
<i class="iconfont icon-username" />
20+
</span>
21+
</div>
22+
</div>
23+
24+
<div class="field">
25+
<label class="label">密码</label>
26+
<div class="control has-icons-left">
27+
<input
28+
v-model="password"
29+
class="input"
30+
type="password"
31+
placeholder="请输入密码"
32+
@keyup.enter="submitLogin"
33+
/>
34+
<span class="icon is-small is-left">
35+
<i class="iconfont icon-password" />
36+
</span>
37+
</div>
38+
</div>
39+
40+
<div class="field login-button">
41+
<button class="button is-success" @click="submitLogin">登录</button>
42+
<nuxt-link class="button is-text" to="/user/signup">没有账号？点击这里去注册&gt;&gt;</nuxt-link>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
</div>
48+
</section>
49+
</template>
50+
51+
<script>
52+
export default {
53+
components: {},
54+
asyncData({ params, query }) {
55+
// console.log('这是登录页面')
56+
// console.log(query.ref)
57+
return {
58+
ref: query.ref,
59+
}
60+
},
61+
data() {
62+
return {
63+
username: '',
64+
password: '',
65+
}
66+
},
67+
computed: {
68+
currentUser() {
69+
return this.$store.state.user.current
70+
},
71+
isLogin() {
72+
return !!this.currentUser
73+
},
74+
},
75+
mounted() {
76+
if (this.redirectIfLogined()) {
77+
return
78+
}
79+
},
80+
methods: {
81+
async submitLogin() {
82+
try {
83+
if (!this.username) {
84+
this.$message.error('请输入用户名或邮箱')
85+
return
86+
}
87+
if (!this.password) {
88+
this.$message.error('请输入密码')
89+
return
90+
}
91+
const user = await this.$store.dispatch('user/signin', {
92+
username: this.username,
93+
password: this.password,
94+
ref: this.ref,
95+
})
96+
if (this.ref) {
97+
// 跳到登录前
98+
this.$linkTo(this.ref)
99+
} else {
100+
// 跳到个人主页
101+
this.$linkTo('/')
102+
}
103+
} catch (e) {
104+
this.$message.error(e.message || e)
105+
}
106+
},
107+
/**
108+
* 如果已经登录了，那么直接跳转
109+
* @returns {boolean}
110+
*/
111+
redirectIfLogined() {
112+
if (this.isLogin) {
113+
const me = this
114+
this.$msg({
115+
message: '登录成功',
116+
onClose() {
117+
if (me.ref && !me.$isSigninUrl(me.ref)) {
118+
me.$linkTo(me.ref)
119+
} else {
120+
me.$linkTo('/')
121+
}
122+
},
123+
})
124+
return true
125+
}
126+
return false
127+
},
128+
},
129+
head() {
130+
return {
131+
title: this.$siteTitle('登录'),
132+
}
133+
},
134+
}
135+
</script>
136+
<style scoped lang="scss">
137+
.signin {
138+
max-width: 480px;
139+
margin: auto;
140+
padding: 0 20px;
141+
142+
.login-captcha-input {
143+
width: 100%;
144+
margin-right: 20px;
145+
.input {
146+
width: 100% !important;
147+
}
148+
}
149+
150+
.login-captcha-img {
151+
img {
152+
height: 40px;
153+
}
154+
}
155+
156+
.login-button {
157+
.button {
158+
width: 100%;
159+
}
160+
}
161+
162+
.third-party-line {
163+
border-bottom: 1px solid #dedede;
164+
margin-bottom: 24px;
165+
.third-party-title {
166+
margin-bottom: -12px;
167+
text-align: center;
168+
169+
span {
170+
background-color: #fff;
171+
padding: 0 10px;
172+
font-size: 13px;
173+
}
174+
}
175+
}
176+
177+
.third-parties {
178+
text-align: center;
179+
margin-bottom: 10px;
180+
}
181+
}
182+
</style>

‎site/pages/user/signup.vue‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<template>
2+
<section class="main">
3+
<div class="container">
4+
<div class="main-body no-bg">
5+
<div class="widget signup">
6+
<div class="widget-header">注册</div>
7+
<div class="widget-content">
8+
<div class="field">
9+
<label class="label">昵称</label>
10+
<div class="control has-icons-left">
11+
<input
12+
v-model="username"
13+
class="input is-success"
14+
type="text"
15+
placeholder="请输入昵称"
16+
@keyup.enter="signup"
17+
/>
18+
<span class="icon is-small is-left">
19+
<i class="iconfont icon-username" />
20+
</span>
21+
</div>
22+
</div>
23+
24+
<div class="field">
25+
<label class="label">邮箱</label>
26+
<div class="control has-icons-left">
27+
<input
28+
v-model="email"
29+
class="input is-success"
30+
type="text"
31+
placeholder="请输入邮箱"
32+
@keyup.enter="signup"
33+
/>
34+
<span class="icon is-small is-left">
35+
<i class="iconfont icon-email" />
36+
</span>
37+
</div>
38+
</div>
39+
40+
<div class="field">
41+
<label class="label">密码</label>
42+
<div class="control has-icons-left">
43+
<input
44+
v-model="password"
45+
class="input"
46+
type="password"
47+
placeholder="请输入密码"
48+
@keyup.enter="signup"
49+
/>
50+
<span class="icon is-small is-left">
51+
<i class="iconfont icon-password" />
52+
</span>
53+
</div>
54+
</div>
55+
56+
<div class="field">
57+
<label class="label">确认密码</label>
58+
<div class="control has-icons-left">
59+
<input
60+
v-model="rePassword"
61+
class="input"
62+
type="password"
63+
placeholder="请再次输入密码"
64+
@keyup.enter="signup"
65+
/>
66+
<span class="icon is-small is-left">
67+
<i class="iconfont icon-password" />
68+
</span>
69+
</div>
70+
</div>
71+
72+
<div class="field">
73+
<div class="control">
74+
<button class="button is-success" @click="signup">注册</button>
75+
<github-login :ref-url="ref" />
76+
<qq-login :ref-url="ref" />
77+
</div>
78+
</div>
79+
80+
<div class="field">
81+
<nuxt-link class="button is-text" to="/user/signin">已有账号，前往登录&gt;&gt;</nuxt-link>
82+
</div>
83+
</div>
84+
</div>
85+
</div>
86+
</div>
87+
</section>
88+
</template>
89+
90+
<script>
91+
export default {
92+
components: {},
93+
asyncData({ params, query }) {
94+
return {
95+
ref: query.ref,
96+
}
97+
},
98+
data() {
99+
return {
100+
username: '',
101+
email: '',
102+
password: '',
103+
rePassword: '',
104+
}
105+
},
106+
mounted() {},
107+
methods: {
108+
async signup() {
109+
try {
110+
await this.$store.dispatch('user/signup', {
111+
username: this.username,
112+
email: this.email,
113+
password: this.password,
114+
rePassword: this.rePassword,
115+
ref: this.ref,
116+
})
117+
if (this.ref) {
118+
// 跳到登录前
119+
this.$linkTo(this.ref)
120+
} else {
121+
// 跳到个人主页
122+
this.$linkTo('/')
123+
}
124+
} catch (err) {
125+
this.$message.error(err.message || err)
126+
}
127+
},
128+
},
129+
head() {
130+
return {
131+
title: this.$siteTitle('注册'),
132+
}
133+
},
134+
}
135+
</script>
136+
137+
<style lang="scss" scoped>
138+
.signup {
139+
max-width: 480px;
140+
margin: auto;
141+
padding: 0 20px;
142+
}
143+
</style>

0 commit comments

Comments
 (0)