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 相关文章推荐
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
Mar 21 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
javascript中数组array及string的方法总结
Nov 28 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
Ajax实现异步加载数据
Nov 17 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 Hash函数,增强密码安全
2011/02/25 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
跟老齐学Python之字典,你还记得吗?
2014/09/20 Python
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
儿童编程python入门
2018/05/08 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
解决python 3 urllib 没有 urlencode 属性的问题
2019/08/22 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
python如何判断IP地址合法性
2020/04/05 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
环境建设实施方案
2014/03/14 职场文书
九九重阳节标语
2014/10/07 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
小平小道观后感
2015/06/09 职场文书
党章学习心得体会2016
2016/01/14 职场文书
MySQL去除密码登录告警的方法
2022/04/20 MySQL