Vue实现登录退出功能
- 登录实现
- 用户输入用户名跟密码
- 数据提交到后台验证
- 验证成功跳转到项目首页
- 功能实现
- 判断用户是否登录
- 需要用到登录的强制跳转到登录页(比如购物车收藏 , 关注等等)
- 使用
localStorage
存 token
router.beforeEach(async (to, from, next) => {
const token = localStorage.getItem('token')
const isLogin = !!token
const data = await userInfo()
Store.commit('chnageUserInfo', data.data)
if (to.matched.some(item => item.meta.login)) {
if (isLogin) {
if (data.error === 400) {
next({ name: 'login' })
localStorage.removeItem('token')
return;
}
if (to.name === 'login') {
next({ name: 'home' })
} else {
next()
}
return;
}
if (!isLogin && to.name === 'login') {
next()
}
if (!isLogin && to.name !== 'login') {
next({ name: 'login' })
}
} else {
next()
}
})
登录组件代码
<template>
<div class="login-section">
<!-- :rules="rules" -->
<el-form
label-position="top"
label-width="100px" class="demo-ruleForm"
:model="ruleForm"
:rules="rules"
ref="ruleForm"
status-icon
>
<el-form-item label="用户名" prop="name">
<el-input type="text" v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="ruleForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {login} from '@/service/api';
export default {
data() {
return {
ruleForm: {
name: '',
password: ''
},
rules: {
name: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
]
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if(valid){
login({
name:this.ruleForm.name,
password:this.ruleForm.password
}).then((data)=>{
if(data.code===0){
localStorage.setItem('token',data.data.token)
window.location.href='/'
}
if(data.code===1){
this.$message.error(data.mes)
}
})
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
<style lang="stylus">
.login-section
padding 0px 20px
</style>
vuex代码
const store = new Vuex.Store({
state:{
userInfo: {}
},
getters:{
isLogin(state){
return !!Object.keys(state.userInfo).length;
}
},
mutations:{
chnageUserInfo(state, data){
state.userInfo = data;
}
},
actions:{}
})
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7007e042effb929c03a5eb3aa6969dd2.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/243f57a0fc7f41ac9ee366828f1b17c3.png)
点登陆就有token
值
<template>
<el-button type="text" @click="open">
<a href="javascript:;" class="collection">退出</a>
</el-button>
</template>
<script>
import {mapState,mapGetters} from "vuex"
export default {
name: 'headers',
components: {Menus},
computed:{
...mapState(['userInfo']),
...mapGetters(['isLogin'])
},
methods:{
open() {
this.$confirm('确定退出登录吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
window.localStorage.removeItem('token')
window.location.href="/"
this.$message({
type: 'success',
message: '退出成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
}
}
}
</script>
<style lang="stylus">
.header
height 129px
background-color #c90000
.logo
display: block;
height: 129px;
width: 184px;
background url(https://s1.c.meishij.net/n/images/logo2.png) -15px 9px no-repeat;
.header_c, .nav_c
width 990px
margin 0 auto
.nav-box
height 60px
background-color #fff;
box-shadow 10px 0px 10px rgba(0,0,0,0.3)
.user-name
margin-left 5px
color #fff
.collection
margin-left 5px
color #fff
</style>