第一步发登录的请求,存储到当地
async login() {
let data = {
username: this.loginForm.username,
password: this.loginForm.password,
}
// console.log(data);
let res = await this.$api.useLogin(data)
console.log(res);
if (res.status == 200) {
this.islogout = false
localStorage.setItem('username', this.loginForm.username);
localStorage.setItem('password', this.loginForm.password);
localStorage.setItem('token', res.data.token)
console.log(res.data.token);
this.token = res.data.token
console.log(this.token);
this.$message.success(this.loginForm.username + '登陆成功');
if (this.loginForm.username === 'admin') {
this.isLogin = true
this.$emit('formlogin', this.isLogin)
} else {
this.isLogin = false
this.$emit('formlogin', this.isLogin)
}
// localStorage.setItem('islogin', false);
// this.$emit('formlogin', this.isLogin)
// this.$emit('formlogins', this.isLogin)
} else {
if (this.loginForm.username == '' && this.loginForm.password == '') {
this.$message.error('账号或密码为空')
} else {
this.$message.error('账号或密码错误')
}
}
},
退出的时候清除当地的缓存
loginout() {
localStorage.removeItem('token')
localStorage.removeItem('username')
localStorage.removeItem('password')
localStorage.removeItem('islogin');
this.loginForm = {
username: '',
password: ''
}
this.islogout = !this.islogout
this.isLogin = false
this.$emit('formlogin', this.isLogin)
// console.log(this.isLogin);
},
验证当前是否有token在created里面用一下,this.existtoken()
// 与后端判断是否存在token
async existtoken() {
try {
const token = localStorage.getItem('token')
let data = {
token: this.token
}
// console.log(data);
let res = await this.$api.usertoken(data)
// console.log(res);
if (res.code == 200) {
this.islogout = false
if(this.loginForm.username === 'admin') {
this.isLogin = true
}else{
this.isLogin = false
}
this.$emit('formlogin', this.isLogin)
} else {
if (res.code == 403) {
this.loginout()
} else {
this.islogout = true
this.isLogin = false
this.$emit('formlogin', this.isLogin)
}
}
} catch (error) {
console.error(error)
this.islogout = true
}
}
},
created() {
// 与后端判断是否存在token
this.existtoken()
// 从当地的拿取数据
// console.log(this.isLogin);
let storedUsername = localStorage.getItem('username');
if (storedUsername) {
this.loginForm.username = storedUsername;
}
// if (islogin === 'false') {
// this.isLogin = false;
// }
}
完整代码
<template>
<!-- 登入 -->
<div>
<div v-if="islogout">
<div>
<span
style="width:60px; height: 25px; font-size: 12px; margin-left: 50%; line-height: 25px; display: inline-block; color: #42a1a1;">用户名:</span>
<input type="text" placeholder="用户名" v-model="loginForm.username"
style="background-color: transparent; color: #42a1a1; border: 1px solid #b1b1ab;">
</div>
<div>
<span
style="width:60px; height: 25px; margin-left: 50%; font-size: 12px; display: inline-block; color: #42a1a1;">密码
:</span>
<input type="text" placeholder="密码" v-model="loginForm.password"
style="background-color: transparent; color: #42a1a1; border: 1px solid #b1b1ab;">
</div>
<div style="display: inline-block; position: absolute; top: 10px; right: 8%;">
<a href="#" style="color: #42a1a1; font-size: 15px;" @click="register">立即注册</a><br>
<button @click="login"
style="text-align: center; font-size: 15px; width:70px ;margin-top: 2px; border: 1px solid #b1b1ab; color: #42a1a1; ">登入</button>
</div>
</div>
<div v-if="!islogout">
<div style="display: inline-block; position: absolute; color: #42a1a1;right: 300px;top: 30px;">
<span>用户名:{{ loginForm.username }}</span>
</div>
<div style="margin-left: 80%; display: inline-block; margin-top: 20px; color: #42a1a1; font-size: 15px;"
@click="loginout">退出</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
loginForm: {
username: '',
password: '',
},
isLogin: false,
// 登入框的显示与隐藏
islogout: false,
token: '',
}
},
methods: {
// 登录
async login() {
let data = {
username: this.loginForm.username,
password: this.loginForm.password,
}
// console.log(data);
let res = await this.$api.useLogin(data)
console.log(res);
if (res.status == 200) {
this.islogout = false
localStorage.setItem('username', this.loginForm.username);
localStorage.setItem('password', this.loginForm.password);
localStorage.setItem('token', res.data.token)
console.log(res.data.token);
this.token = res.data.token
console.log(this.token);
this.$message.success(this.loginForm.username + '登陆成功');
if (this.loginForm.username === 'admin') {
this.isLogin = true
this.$emit('formlogin', this.isLogin)
} else {
this.isLogin = false
this.$emit('formlogin', this.isLogin)
}
// localStorage.setItem('islogin', false);
// this.$emit('formlogin', this.isLogin)
// this.$emit('formlogins', this.isLogin)
} else {
if (this.loginForm.username == '' && this.loginForm.password == '') {
this.$message.error('账号或密码为空')
} else {
this.$message.error('账号或密码错误')
}
}
},
// 注册
register() {
this.$router.push('/login')
},
// 退出
loginout() {
localStorage.removeItem('token')
localStorage.removeItem('username')
localStorage.removeItem('password')
localStorage.removeItem('islogin');
this.loginForm = {
username: '',
password: ''
}
this.islogout = !this.islogout
this.isLogin = false
this.$emit('formlogin', this.isLogin)
// console.log(this.isLogin);
},
// 与后端判断是否存在token
async existtoken() {
try {
const token = localStorage.getItem('token')
let data = {
token: this.token
}
// console.log(data);
let res = await this.$api.usertoken(data)
// console.log(res);
if (res.code == 200) {
this.islogout = false
if(this.loginForm.username === 'admin') {
this.isLogin = true
}else{
this.isLogin = false
}
this.$emit('formlogin', this.isLogin)
} else {
if (res.code == 403) {
this.loginout()
} else {
this.islogout = true
this.isLogin = false
this.$emit('formlogin', this.isLogin)
}
}
} catch (error) {
console.error(error)
this.islogout = true
}
}
},
created() {
// 与后端判断是否存在token
this.existtoken()
// 从当地的拿取数据
// console.log(this.isLogin);
let storedUsername = localStorage.getItem('username');
if (storedUsername) {
this.loginForm.username = storedUsername;
}
// if (islogin === 'false') {
// this.isLogin = false;
// }
}
}
</script>
<style lang="less" scoped>
input::-webkit-input-placeholder {
padding-left: 10px;
font-size: 10px;
color: #42a1a1;
border: 1px solid white;
}
</style>