electron-vue第二章：登录拦截以及登录界面

最终效果：

第一步：安装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;//主要代码