vue+element-ui+js-cookie+store实现登录功能
脚手架vue-cli3.*
login.vue
<template>
<div class="login">
<div class="logo">
<h2>后台登录系统</h2>
</div>
<div class="loginForm">
<el-form
:model="ruleForm2"
status-icon
:rules="rules2"
ref="ruleForm2"
label-width="100px"
class="demo-ruleForm"
v-loading="loading"
>
<el-form-item label="用户名" prop="pass">
<el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
<el-button @click="resetForm('ruleForm2')">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import Cookies from 'js-cookie'
import { type } from 'os';
export default {
name: "login",
data() {
var reg = /^[0-9]{6,10}$/
var regPass = /^[0-9A-Za-z]{6,10}$/
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入用户名'));
}else if(!reg.test(value)){
callback(new Error('请输入正确格式的用户名'))
}else{
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
}else if(!regPass.test(value)){
callback('请输入正确格式的密码');
} else {
callback();
}
};
return {
loading:false,
ruleForm2: {
pass: '',
checkPass: '',
},
rules2: {
pass: [
{ validator: validatePass, trigger: ['blur'] },
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
],
}
};
},
methods: {
submitForm(formName) {
this.loading =true;
this.$refs[formName].validate((valid) => {
if (valid) {
this.$https.post('/api')
.then(data=>{
if(data.data.code==200){
setTimeout(() => {
Cookies.set('token',data.data.token,30);
this.$store.commit('settoken',data.data.token);
this.$router.push({path:'/home'});
console.log(this.$store.state.token);
this.$message('登录成功');
}, 2000);
}
})
.catch(err=>{
this.$message('服务器繁忙,请重试');
this.$router.push({path:'/'})
})
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
created(){
console.log(this.$store.state.token);
}
};
</script>
<style scoped>
.line {
width: 100% !important;
height: 100% !important;
float: none !important;
}
html {
background-image: url("../assets/bg.jpg");
}
.logo{
margin-top: 100px;
text-align: center;
}
.loginForm{
display: block;
margin: 0px auto;
width: 20%;
}
</style>
main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import App from './App.vue';
import router from './router';
import 'element-ui/lib/theme-chalk/index.css';
import store from './store';
import axios from 'axios';
Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.prototype.$https = axios;
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');
route.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
import Login from './views/Login.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'login',
component: Login,
meta: {
keepAlive: false,
test:false,
},
},
{
path: '/home',
name: 'home',
component: Home,
meta: {
keepAlive: true,
test:true,
requireAuth:true,
},
},
{
path: '/about',
name: 'about',
component: About,
meta: {
keepAlive: true,
test:true,
requireAuth:true,
},
},
],
});
store.js
import Vue from 'vue';
import Vuex from 'vuex';
import Cookies from 'js-cookie'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
token:'' || Cookies.get('token'),
},
mutations: {
settoken(state,data){
state.token =data;
}
},
actions: {
commitsettoken:({commit},token)=>commit('settoken',token)
},
});
App.vue
<template>
<div id="app">
<el-row class="tac" v-if="$route.meta.test">
<el-col :span="12">
<h5>默认颜色</h5>
<el-menu default-active="1-1" class="el-menu-vertical-demo">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">
<router-link to="/home">选项1</router-link>
</el-menu-item>
<el-menu-item index="1-2">
<router-link to="/about">选项2</router-link>
</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
<!-- <div class="clear"></div> -->
<div class="line">
<router-view/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeIndex: "1",
activeIndex2: "1"
};
},
methods: {
},
created(){
},
};
</script>
<style lang="scss" scoped>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
a {
text-decoration: none;
color: black;
width: 100%;
height: 100%;
display: block;
text-align: center;
}
.router-link-active {
background-color: #ecf5ff;
}
.tac {
width: 10%;
margin-right: 0px;
display: inline-block;
float: left;
}
.el-col {
width: 100% !important;
}
.clear {
clear: both;
}
.line {
float: left;
width: 80%;
}
.el-submenu .el-menu-item {
padding: 0px !important;
min-width: 0px !important;
}
</style>