1.效果图
2.注册效果实现
<template>
<div class="login-section">
<el-form
label-position="top" label-width="100px" class="demo-ruleForm"
:rules="rules"
:model="rulesForm"
status-icon
ref="ruleForm"
>
<el-form-item label="用户名" prop="name">
<el-input type="text" v-model="rulesForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="rulesForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')" >提交</el-button>
<el-button >重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {register} from '@/service/api';
export default {
data() {
return {
rulesForm:{
name:'',
password:''
},
rules:{
name:[
{required:true,message:'请输入名字',trigger:"blur"},
{min:1,max:5,message:"长度3-5",trigger:"blur"}
],
password:[
{required:true,message:'请输入密码',trigger:"blur"},
{min:3,max:5,message:"长度3-5",trigger:"blur"}
]
}
};
},
methods: {
submitForm(formName){
this.$refs[formName].validate((valid)=>{
if(valid){
//如果校检通过，在这里向后端发送用户名和密码
register({
name: this.rulesForm.name,
password: this.rulesForm.password,
}).then((data)=>{
console.log(data)
if(data.code === 0){
localStorage.setItem('token',data.data.token);
window.location.href= '/';
}
if(data.code === 1){
this.$message.error(data.mes)
}
});
}else{
console.log("error submit!!");
return false;
}
});
}
}
}
</script>
<style lang="stylus">
.login-section
padding 0px 20px
</style>
3.登录页面实现
<template>
<div class="login-section">
<el-form
label-position="top"
label-width="100px" class="demo-ruleForm"
:rules="rules"
:model="rulesForm"
status-icon
ref="ruleForm"
>
<el-form-item label="用户名" prop="name">
<el-input type="text" v-model="rulesForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="rulesForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button>重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {login} from '@/service/api';
export default {
data() {
return {
//存储数据的对象
rulesForm:{
name:'',
password:''
},
rules:{
name:[
{required:true,message:'请输入名字',trigger:"blur"},
{min:1,max:5,message:"长度3-5",trigger:"blur"}
],
password:[
{required:true,message:'请输入密码',trigger:"blur"},
{min:3,max:5,message:"长度3-5",trigger:"blur"}
]
}
};
},
methods: {
submitForm(formName){
this.$refs[formName].validate((valid)=>{
if(valid){
//如果校检通过，在这里向后端发送用户名和密码
login({
name: this.rulesForm.name,
password: this.rulesForm.password,
}).then((data)=>{
console.log(data)
if(data.code === 0){
localStorage.setItem('token',data.data.token);
window.location.href= '/';
}
if(data.code === 1){
this.$message.error(data.mes)
}
});
}else{
console.log("error submit!!");
return false;
}
});
}
}
}
</script>
<style lang="stylus">
.login-section
padding 0px 20px
</style>
4.路由跳转实现
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Store from '@/store'
import {userInfo} from '@/service/api.js'
import Login from '@/views/user-login/index.vue'
const router = new Router({
mode:"history",
routes:[
{
path:'/login',
name:"login",
title:"登录页",
component:Login,
meta:{
login:true
}
}
]
});
//路由守卫
router.beforeEach( async (to,from,next) => {
/*
有些路由是需要登录的，判断登录状态
1.没有登录：跳转到登录页
2.登录：直接进入
有些路由是不需要登录的，直接进入
ps：是否需要登录 --meta
*/
const token = localStorage.getItem('token');
const isLogin = !!token;
//进入路由的时候，需要向后端发送token，验证是否合法
const data = await userInfo();
Store.commit('chageUserInfo',data.data)
if(to.matched.some(item => item.meta.login)){//需要登录
console.log("需要登录");
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();
}
})
export default router;
