vue实现登录拦截


Posted in Javascript onJune 29, 2020

本文实例为大家分享了vue实现登录拦截的具体代码,供大家参考,具体内容如下

需求:用户只有登录了,用户名存储在本地储存时,才能进入首页,如果本地存储没有用户名,就不能进入首页

1、登录页面的实现

<template>
 <div class="htmleaf-container">
 <div class="demo form-bg">
  <div class="container">
  <div class="row">
   <div class="col-md-offset-3 col-md-6">
   <form class="form-horizontal">
    <span class="heading">用户登录</span>
    <div class="form-group">
    <input type="text" class="form-control" id="inputtxt" placeholder="用户名" v-model="username" @blur="inputUserBlur" @focus="inputFocus">
    <i class="fa fa-user"></i>
    </div>
    <div class="form-group help">
    <input type="password" class="form-control" id="inputPassword3" placeholder="密码" v-model="psd" @blur="inputPsdBlur">
    <i class="fa fa-lock"></i>
    <a href="#" rel="external nofollow" class="fa fa-question-circle"></a>
    </div>
    <div class="form-group">
    <div class="main-checkbox">
     <input type="checkbox" value="None" id="checkbox1" name="check"/>
     <label for="checkbox1"></label>
    </div>
    <span class="text">记住我</span>
    <button type="button" class="btn btn-default" @click="loginBtn">立刻登录</button>
    </div>
   </form>
   </div>
  </div>
  </div>
 </div>
 </div>
</template>
<style lang="less" scoped>
@import 'http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css';
 @import 'http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css';
@import '.././assets/login/css/index.css';
.form-bg{
 padding: 2em 0;
 }
 .form-horizontal{
 background: #fff;
 padding-bottom: 40px;
 border-radius: 15px;
 text-align: center;
 }
 .form-horizontal .heading{
 display: block;
 font-size: 35px;
 font-weight: 700;
 padding: 35px 0;
 border-bottom: 1px solid #f0f0f0;
 margin-bottom: 30px;
 }
 .form-horizontal .form-group{
 padding: 0 40px;
 margin: 0 0 25px 0;
 position: relative;
 }
 .form-horizontal .form-control{
 background: #f0f0f0;
 border: none;
 border-radius: 20px;
 box-shadow: none;
 padding: 0 20px 0 45px;
 height: 40px;
 transition: all 0.3s ease 0s;
 }
 .form-horizontal .form-control:focus{
 background: #e0e0e0;
 box-shadow: none;
 outline: 0 none;
 }
 .form-horizontal .form-group i{
 position: absolute;
 top: 12px;
 left: 60px;
 font-size: 17px;
 color: #c8c8c8;
 transition : all 0.5s ease 0s;
 }
 .form-horizontal .form-control:focus + i{
 color: #00b4ef;
 }
 .form-horizontal .fa-question-circle{
 display: inline-block;
 position: absolute;
 top: 12px;
 right: 60px;
 font-size: 20px;
 color: #808080;
 transition: all 0.5s ease 0s;
 }
 .form-horizontal .fa-question-circle:hover{
 color: #000;
 }
 .form-horizontal .main-checkbox{
 float: left;
 width: 20px;
 height: 20px;
 background: #11a3fc;
 border-radius: 50%;
 position: relative;
 margin: 5px 0 0 5px;
 border: 1px solid #11a3fc;
 }
 .form-horizontal .main-checkbox label{
 width: 20px;
 height: 20px;
 position: absolute;
 top: 0;
 left: 0;
 cursor: pointer;
 }
 .form-horizontal .main-checkbox label:after{
 content: "";
 width: 10px;
 height: 5px;
 position: absolute;
 top: 5px;
 left: 4px;
 border: 3px solid #fff;
 border-top: none;
 border-right: none;
 background: transparent;
 opacity: 0;
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 }
 .form-horizontal .main-checkbox input[type=checkbox]{
 visibility: hidden;
 }
 .form-horizontal .main-checkbox input[type=checkbox]:checked + label:after{
 opacity: 1;
 }
 .form-horizontal .text{
 float: left;
 margin-left: 7px;
 line-height: 20px;
 padding-top: 5px;
 text-transform: capitalize;
 }
 .form-horizontal .btn{
 float: right;
 font-size: 14px;
 color: #fff;
 background: #00b4ef;
 border-radius: 30px;
 padding: 10px 25px;
 border: none;
 text-transform: capitalize;
 transition: all 0.5s ease 0s;
 }
 @media only screen and (max-width: 479px){
 .form-horizontal .form-group{
  padding: 0 25px;
 }
 .form-horizontal .form-group i{
  left: 45px;
 }
 .form-horizontal .btn{
  padding: 10px 20px;
 }
 }
</style>

index.css

/* @font-face {
 font-family: 'icomoon';
 src:url('../fonts/icomoon.eot?rretjt');
 src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),
 url('../fonts/icomoon.woff?rretjt') format('woff'),
 url('../fonts/icomoon.ttf?rretjt') format('truetype'),
 url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
} */

[class^="icon-"], [class*=" icon-"] {
 font-family: 'icomoon';
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;

 /* Better Font Rendering =========== */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

body, html { font-size: 100%; padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
 content: " ";
 display: table;
}

.clearfix:after {
 clear: both;
}

body{
 background: #494A5F;
 font-weight: 500;
 font-size: 1.05em;
 font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}
a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;}
a:hover,a:focus{color:#74777b;text-decoration: none;}
.htmleaf-container{
 margin: 0 auto;
}

.bgcolor-1 { background: #f0efee; }
.bgcolor-2 { background: #f9f9f9; }
.bgcolor-3 { background: #e8e8e8; }/*light grey*/
.bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/
.bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/
.bgcolor-6 { background: #2fa8ec; }/*sky blue*/
.bgcolor-7 { background: #d0d6d6; }/*White tea*/
.bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/
.bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/
.bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/
.bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/
.bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/
.bgcolor-20{ background: #494A5F;color: #D5D6E2;}
/* Header */
.htmleaf-header{
 padding: 1em 190px 1em;
 letter-spacing: -1px;
 text-align: center;
 background: #66677c;
}
.htmleaf-header h1 {
 color: #D5D6E2;
 font-weight: 600;
 font-size: 2em;
 line-height: 1;
 margin-bottom: 0;
}
.htmleaf-header h1 span {
 display: block;
 font-size: 60%;
 font-weight: 400;
 padding: 0.8em 0 0.5em 0;
 color: #c3c8cd;
}
/*nav*/
.htmleaf-demo a{color: #fff;text-decoration: none;}
.htmleaf-demo{width: 100%;padding-bottom: 1.2em;}
.htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #fff;font-weight: 700;}
.htmleaf-demo a:hover{opacity: 0.6;}
.htmleaf-demo a.current{background:#1d7db1;color: #fff; }
/* Top Navigation Style */
.htmleaf-links {
 position: relative;
 display: inline-block;
 white-space: nowrap;
 font-size: 1.5em;
 text-align: center;
}

.htmleaf-links::after {
 position: absolute;
 top: 0;
 left: 50%;
 margin-left: -1px;
 width: 2px;
 height: 100%;
 background: #dbdbdb;
 content: '';
 -webkit-transform: rotate3d(0,0,1,22.5deg);
 transform: rotate3d(0,0,1,22.5deg);
}

.htmleaf-icon {
 display: inline-block;
 margin: 0.5em;
 padding: 0em 0;
 width: 1.5em;
 text-decoration: none;
}

.htmleaf-icon span {
 display: none;
}

.htmleaf-icon:before {
 margin: 0 5px;
 text-transform: none;
 font-weight: normal;
 font-style: normal;
 font-variant: normal;
 font-family: 'icomoon';
 line-height: 1;
 speak: none;
 -webkit-font-smoothing: antialiased;
}
/* footer */
.htmleaf-footer{width: 100%;padding-top: 10px;}
.htmleaf-small{font-size: 0.8em;}
.center{text-align: center;}
/****/
.related {
 color: #fff;
 background: #494A5F;
 text-align: center;
 font-size: 1.25em;
 padding: 0.5em 0;
 overflow: hidden;
}

.related > a {
 vertical-align: top;
 width: calc(100% - 20px);
 max-width: 340px;
 display: inline-block;
 text-align: center;
 margin: 20px 10px;
 padding: 25px;
 font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
.related a {
 display: inline-block;
 text-align: left;
 margin: 20px auto;
 padding: 10px 20px;
 opacity: 0.8;
 -webkit-transition: opacity 0.3s;
 transition: opacity 0.3s;
 -webkit-backface-visibility: hidden;
}

.related a:hover,
.related a:active {
 opacity: 1;
}

.related a img {
 max-width: 100%;
 opacity: 0.8;
 border-radius: 4px;
}
.related a:hover img,
.related a:active img {
 opacity: 1;
}
.related h3{font-family: "Microsoft YaHei", sans-serif;font-size: 1.2em}
.related a h3 {
 font-size: 0.85em;
 font-weight: 300;
 margin-top: 0.15em;
 color: #fff;
}
/* icomoon */
.icon-htmleaf-home-outline:before {
 content: "\e5000";
}

.icon-htmleaf-arrow-forward-outline:before {
 content: "\e5001";
}

@media screen and (max-width: 1024px) {
 .htmleaf-header {
 padding: 2em 10% 2em;
 }
 .htmleaf-header h1 {
 font-size:1.4em;
 }
 .htmleaf-links{font-size: 1.4em}
}

@media screen and (max-width: 960px) {
 .htmleaf-header {
 padding: 2em 10% 2em;
 }
 .htmleaf-header h1 {
 font-size:1.2em;
 }
 .htmleaf-links{font-size: 1.2em}
 .related h3{font-size: 1em;}
 .related a h3 {
 font-size: 0.8em;
 }
}

@media screen and (max-width: 766px) {
 .htmleaf-header h1 {
 font-size:1.3em;
 }
 .htmleaf-links{font-size: 1.3em}
}

@media screen and (max-width: 640px) {
 .htmleaf-header {
 padding: 2em 10% 2em;
 }
 .htmleaf-header h1 {
 font-size:1em;
 }
 .htmleaf-links{font-size: 1em}
 .related h3{font-size: 0.8em;}
 .related a h3 {
 font-size: 0.6em;
 }
}

vue实现登录拦截

首先首页需要用户登录成功,且本地有username的存储,才能进入首页,那么就要在首页的路由中配置拦截。

1、首页路由

{
 path: '/',
 name: 'home',
 component: Home,
 meta: {
 requireAuth: true //配置拦截
 },
 },

2、登录页面路由

{
 path: '/login',
 name: 'login',
 component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue')
 }

路由钩子函数

router.beforeEach((to,from,next)=>{
 if(to.meta.requireAuth){
 if(localStorage.getItem('username')){
 next();
 }else{
 next({
 path:'/login'
 })
 }
 }else{
 next();
 }
})

登录页面的验证:

<script>
export default {
 name: 'login',
 data() {
 return {
  username:"",
  psd:'',
  userKey:false,
  psdKey:false
 }
 },
 
 methods: {
 //用户名验证
 inputUserBlur(){
  let filter = /^[a-zA-Z0-9_]{6,16}$/;
  console.log('blur');
  if(this.username.trim() == ''){
  this.$message.error('用户名不能为空');
  }else if(!filter.test(this.username)){
  this.$message({
   message: '用户名格式错误(6到16位,字母数字下划线,减号,中间不能有空格)',
   type: 'warning'
  });
  }else{
  this.userKey = true;//用户名格式正确
  }
 },
 //密码验证
 inputPsdBlur(){
  let filter = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,20}$/;
  console.log('blur');
  if(this.psd.trim() == ''){
  this.$message.error('密码不能为空');
  }else if(!filter.test(this.psd)){
  this.$message({
   message: '密码格式错误(密码包含 数字,英文,字符中的两种以上,长度6-20)',
   type: 'warning'
  });
  }else{
  this.psdKey = true;//密码格式正确
  }
 },
 //登录
 loginBtn(){
  console.log(this.userKey,this.psdKey)
  if(this.userKey && this.psdKey){
  this.$message({
  message: '恭喜你,登录成功',
  type: 'success'
  });
  localStorage.setItem('username',JSON.stringify(this.username));
  this.username = '';
  this.psd = '';
  this.$router.push('/')
  }else{
  this.$message.error('用户名和密码不能为空');
  }
 }
 },
}
</script>

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
js函数的延迟加载实现代码
Oct 11 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
Vue组件开发初探
Feb 14 Javascript
vue实现app页面切换动画效果实例
May 23 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
Vue实现开关按钮拖拽效果
Sep 22 Javascript
实现一个简单得数据响应系统
Nov 11 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 #Javascript
JavaScript多种图形实现代码实例
Jun 28 #Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 #Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 #Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 #Javascript
国内常用的js类库大全(CDN公共库)
Jun 24 #Javascript
viewer.js实现图片预览功能
Jun 24 #Javascript
You might like
在php中使用sockets:从新闻组中获取文章
2006/10/09 PHP
jQuery 源码分析笔记
2011/05/25 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
一段实用的php验证码函数
2016/05/19 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
js tab效果的实现代码
2009/12/26 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
2010/06/28 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
javaScript给元素添加多个class的简单实现
2016/07/20 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
angularjs下拉框空白的解决办法
2017/06/20 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
Angular中sweetalert弹框的基本使用教程
2018/07/22 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
python实现按长宽比缩放图片
2018/06/07 Python
Python爬虫文件下载图文教程
2018/12/23 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
Python之修改图片像素值的方法
2019/07/03 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
阿波罗盒子:Apollo Box
2017/08/14 全球购物
2014年上半年工作自我评价
2014/01/18 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
小学母亲节活动方案
2014/03/14 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
针对吵架老公保证书
2015/05/08 职场文书
教师旷工检讨书
2015/08/15 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL