最终效果:
第一步:安装element
安装步骤请查看官方文档:Element - The world's most popular Vue UI framework
第二步:登录拦截
使用vue导航守卫router.beforeEach,文档地址:导航守卫 | Vue Router
renderer/main.js中加入以下代码,需要登录权限则跳到登录界面,由sessionStorage来控制是否跳转页面。
// 登录拦截
router.beforeEach((to, from, next) => {
let flag = sessionStorage.getItem("user")
if(to.meta.requiresAuth == true){//需要登录权限进入的路由
if(!flag){
next({
path: '/login'
})
}else{
return next();//获取到登录信息进行下一步
}
}else{//不需要权限登录的直接进行下一步
return next();
}
})
第三步:制作登录界面
在components目录中新增vue页面login.vue
//login.vue
<template>
<div>
<div class="mains">
<div class="logo">
<el-image class="imgs" :src="url"></el-image>
</div>
<div class="header">
<div class="title">系统登录</div>
</div>
<div style="padding:15px;">
<el-form ref="loginForm" :model="form">
<el-form-item prop="username">
<el-input prefix-icon="el-icon-user-solid" v-model="form.username" placeholder="账号" clearable></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input show-password prefix-icon="el-icon-s-goods" v-model="form.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button style="width: 100%;" type="primary" v-on:click="onSubmit()">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
import set from '../../../set.json'
export default {
name: "Login",
data() {
return {
url:"http://" + set.selsectip + ":" + set.port + "/public/logo.ico",
form: {
username: '',
password: ''
}
}
},
methods: {
onSubmit() {
// console.log("账号:" + this.form.username + " " + "密码:" + this.form.password)
if(this.form.username==""){
this.$message.error('请输入账号')
}else if(this.form.password==""){
this.$message.error('请输入密码')
}else{
sessionStorage.setItem("user",this.form.username);
this.$router.push("/");
}
}
}
}
</script>
<style>
.mains {
width: 350px;
margin: 0px auto;
height: 490px;
padding: 140px 35px 0;
}
.logo {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.imgs {
width: 80px;
height: 80px;
}
.header {
padding: 0 15px;
display: flex;
height: 55px;
align-items: center;
justify-content: space-between;
border-bottom: 1px #f5f5f5 solid;
}
.title {
margin-right: 10px;
font-size: 18px;
font-weight: 500;
color: #333;
}
</style>
同时在app.vue中加入样式
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'viapp'
}
</script>
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0px;
overflow: hidden;
}
</style>
效果图:
图片需要自己修改,我采用的是重服务端拉取。
第三步:修改element消息提示
Element的消息提示虽然会自动删除,但是非常烦人,所以修改一下。
1.在项目目录下新建文件resetMessage.js
代码:
/**重置message,防止重复点击重复弹出message弹框 */
import {
Message
} from 'element-ui';
const showMessage = Symbol('showMessage')
class DoneMessage {
[showMessage](type, options, single) {
if (single) {
if (document.getElementsByClassName('el-message').length === 0) {
Message[type](options)
}
} else {
Message[type](options)
}
}
info(options, single = true) {
this[showMessage]('info', options, single)
}
warning(options, single = true) {
this[showMessage]('warning', options, single)
}
error(options, single = true) {
this[showMessage]('error', options, single)
}
success(options, single = true) {
this[showMessage]('success', options, single)
}
}
export const message = new DoneMessage();
2.在main.js中引用
代码:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import {message} from '../../resetMessage.js';//主要代码
Vue.use(ElementUI);
Vue.prototype.$message = message;//主要代码