1 ，项目基础准备
vue-cli 创建项目
参考https://www.jianshu.com/p/3d44f8269b47
stylus安装
npm install stylus --save
npm install stylus-loader --save
2，install element-ui
npm i element-ui -S
再main.js中加
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
以上是引入element-ui的全部组件，也可以按需引入，可参考https://element.eleme.cn/#/zh-CN/component/quickstart
3，完成登录验证部分
添加全局前置守卫，验证用户登录状态
在 路由文件中写入
router.beforeEach((to, from, next) => {
if (to.path === '/login') {
next();
} else {
let token = localStorage.getItem('token');//token保存在localstorage中
if (token === null || token === '') {
next('/login');
} else {
next();
}
}
});
install vuex
在vuex 中写入以下代码
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
state:{
userInfo:localStorage.getItem("userInfo")?localStorage.getItem("userInfo"):'',
token: localStorage.getItem('token') ? localStorage.getItem('token') : '',
},
mutations:{
//保存登录信息
saveUserInfo(state,userInfo){
state.userInfo=userInfo;
localStorage.setItem('userInfo',userInfo)
},
//改变token
changeToken(state,token){
state.token = token;
localStorage.setItem("token",token)
}
}
})
完成登录的界面：
<template>
<div class="login">
<div class="login_input">
<h5>系统登录</h5>
<el-input placeholder="请输入用户名" v-model="username" maxlength="12"></el-input>
<el-input placeholder="请输入密码" v-model="password" show-password maxlength="15" show-word-limit></el-input>
<el-checkbox v-model="rememberPw" checked class="remember">记住密码</el-checkbox>
<el-button @click="login"> 确认登录</el-button>
<p>------管理后台------</p>
</div>
</div>
</template>
<script>
export default {
name: "login",
data(){
return{
username:'',
password:'',
rememberPw:false
}
},
store,
methods:{
},
mounted() {
},
created() {
}
}
</script>
<style lang="stylus" scoped>
.login
width 100%
position relative
.login_input
height 350px
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
position relative
margin 0 auto
margin-top 100px
padding: 35px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
width 400px
box-sizing border-box
>>>.el-input
::-webkit-input-placeholder
color eee
h5
font-size 20px
color #484848
font-family '微软雅黑'
.el-input
margin-top 20px
p
margin-top 20px
font-size 14px
color #484848
.el-button
margin-top 30px
background #e48040
color #ffffff
.remember {
text-align left
width 100%
margin-top 10px
}
</style>
界面：
完成登录方法：
<template>
<div class="login">
<div class="login_input">
<h5>系统登录</h5>
<el-input placeholder="请输入用户名" v-model="username" maxlength="12"></el-input>
<el-input placeholder="请输入密码" v-model="password" show-password maxlength="15" show-word-limit></el-input>
<el-checkbox v-model="rememberPw" checked class="remember">记住密码</el-checkbox>
<el-button @click="login"> 确认登录</el-button>
<p>------管理后台------</p>
</div>
</div>
</template>
<script>
import { mapMutations } from 'vuex';
import store from '@/store/index.js'
export default {
name: "login",
data(){
return{
username:'',
password:'',
rememberPw:false
}
},
store,
methods:{
...mapMutations(['changeToken','saveUserInfo']),
//登录
login () {
let _this = this;
if (this.username == '' || this.password == '') {
alert('账号或密码不能为空');
} else {
let userInfo={userName:this.username,userPw:this.password}
let token="cczhk"
_this.saveUserInfo(JSON.stringify(userInfo));
_this.changeToken(token);
this.$router.push({
path: '/'
})
}
}
},
mounted() {
localStorage.setItem('token', '');
let userInfo=JSON.parse(localStorage.getItem('userInfo')) || {userName:'',userPw:''}
this.username= userInfo.userName
this.password= userInfo.userPw
},
created() {
var _this = this;
document.onkeydown=function (e) {
let key = window.event.keyCode;
if (key==13){
_this.login()
}
}
}
}
</script>
<style lang="stylus" scoped>
.login
width 100%
position relative
.login_input
height 350px
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
position relative
margin 0 auto
margin-top 100px
padding: 35px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
width 400px
box-sizing border-box
>>>.el-input
::-webkit-input-placeholder
color eee
h5
font-size 20px
color #484848
font-family '微软雅黑'
.el-input
margin-top 20px
p
margin-top 20px
font-size 14px
color #484848
.el-button
margin-top 30px
background #e48040
color #ffffff
.remember {
text-align left
width 100%
margin-top 10px
}
</style>
这样就完成了简单的登录，实际项目中加入后台提供的登录接口能使用
