vue.js中实现登录控制的方法示例


Posted in Javascript onApril 23, 2018

本文实例讲述了vue.js中实现登录控制的方法。分享给大家供大家参考,具体如下:

vue中使用vue-router实现登录的控制在做后台管理系统中很常见,但是不想之前熟悉的流程那样,不过只要大家理解vue-router的使用也是很好实现的。

首先我们需要编写登录页面和主页面:

<template>
 <div class="login">
  <table width="100%" height="100%">
   <tr height="41"><td class="logintb" colspan="2"> </td></tr>
   <tr height="100%" class="loginbg">
    <td id="left_cont">
     <table width="100%" height="100%">
      <tr height="155"><td colspan="2"> </td></tr>
      <tr>
       <td width="20%" rowspan="2"> </td>
       <td width="60%">
        <table width="100%">
          <tr height="70"><td align="right"></td></tr>
          <tr height="274">
            <td valign="top" align="right">
              <img src="../../static/images/logo.png"/>
             </img/>
            </td>
          </tr>
        </table>
       </td>
       <td width="15%" rowspan="2"> </td>
      </tr>
      <tr><td colspan="2"> </td></tr>
     </table>
    </td>
    <td id="right_cont">
     <table height="100%">
      <tr height="30%"><td colspan="3"> </td></tr>
      <tr>
       <td width="30%" rowspan="5"> </td>
       <td valign="top" id="form">
          <table valign="top" width="50%">
            <tr><td colspan="2"><h4 style="letter-spacing:1px;font-size:16px;">管理后台</h4></td></tr>
            <tr><td>管理员:</td><td><input type="text" v-model.trim="username" value="" /></td></tr>
            <tr><td>密  码:</td><td><input type="password" v-model.trim="pwd" value="" /></td></tr>
            <!-- <tr><td>验证码:</td><td><input type="text" name="" value="" style="width:80px;"/></td></tr> -->
            <tr class="bt" align="center"><td> <input type="submit" @click="login" value="登陆" /></td><td> </td></tr>
          </table>
       </td>
       <td rowspan="5"> </td>
      </tr>
      <tr><td colspan="3"> </td></tr>
     </table>
    </td>
   </tr>
   <tr id="login_bot"><td colspan="2"><p>Copyright © 2017-{{getNowDate()}} Tujiawang</p></td></tr>
  </table>
 </div>
</template>
<script>
 import axios from 'axios'
 axios.defaults.withCredentials = true
 export default{
  data(){
   return {
    username:'',
    pwd:''
   }
  },
  methods: {
   login() {
    var params = new URLSearchParams();
    params.append('username', this.username);
    params.append('password', this.pwd);
    axios.post(this.HOST+'/home/system/login',params).then(res => {
      if(res.data.code ==1){
       sessionStorage.username = this.username;
       this.$router.push({path:'/main'})
      }else{
       alert('登录失败')
      }
    })
   },
   getNowDate(){
    var d = new Date();
    return d.getFullYear();
   }
  }
 }
</script>

上面的登录页面注意:login方法中登录成功需要写入sessionStorage以便路由进行判断

最主要的是路由文件中的内容:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    name: 'login',
    component: (resolve)=>{require(['../components/Login'],resolve)}
  },
  {
    path: '/main',
    name: 'main',
    component: (resolve)=>{require(['../components/Home'],resolve)},
    redirect: 'main/info',
    children: [{
        path: 'info',
        meta: {
          id:-1
        },
        component: (resolve)=>{require(['../components/Main'],resolve)}
      }
    ]
  },
  {
    path: '/vips',
    name: 'vips',
    component: (resolve)=>{require(['../components/Home'],resolve)},
    redirect: 'vips/list',
    children: [{
        path: 'list',
        meta: {
          id:0
        },
        component: (resolve)=>{require(['../components/VipsList'],resolve)}
      },
      {
        path: 'detail',
        meta: {
          id:0
        },
        component: (resolve)=>{require(['../components/VipsDetail'],resolve)}
      },
      {
        path: 'userlog',
        meta: {
          id:0
        },
        component: (resolve)=>{require(['../components/UserLog'],resolve)}
      }
    ]
  }
];
const router = new Router({
  routes
});
/**
 * to:表示目标路由
 * from:表示来源路由
 * next:表示执行下一步操作
 */
router.beforeEach((to, from, next) => {
  if (to.path === '/login') { // 当路由为login时就直接下一步操作
    next();
  } else { // 否则就需要判断
    if(sessionStorage.username){ // 如果有用户名就进行下一步操作
     next()
    }else{
     next({path: '/login'}) // 没有用户名就跳转到login页面
    }
  }
})
export default router

目前这个只是简单的处理,这种方法官方叫做路由守卫,还有一种写法就是在meta中添加是否需要登录的控制,在beforeEach中来判断,和上面方法一样的。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 #Javascript
Vue前端开发规范整理(推荐)
Apr 23 #Javascript
Vue 中mixin 的用法详解
Apr 23 #Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 #Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 #Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 #Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 #Javascript
You might like
怎样去阅读一份php源代码
2009/08/21 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
js查找父节点的简单方法
2008/06/28 Javascript
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
javascript兼容性(实例讲解)
2017/08/15 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
Python的面向对象思想分析
2015/01/14 Python
在Django的URLconf中使用多个视图前缀的方法
2015/07/18 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
关于python多重赋值的小问题
2019/04/17 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
结对共建工作方案
2014/06/02 职场文书
试用期辞职信范文
2015/03/02 职场文书
加入学生会自荐书
2015/03/05 职场文书
小学数学新课改心得体会
2016/01/22 职场文书