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 Timer实现代码
Feb 17 Javascript
IE下js调试工具Companion.JS
Oct 15 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
vue中添加与删除关键字搜索功能
Oct 12 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防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
jquery实现简单的二级导航下拉菜单效果
2015/09/07 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
Python下的twisted框架入门指引
2015/04/15 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
CSS3对图片照片进行边缘模糊处理的实现
2018/08/08 HTML / CSS
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
毕业生造价工程师求职信
2013/10/17 职场文书
保险专业大专生求职信
2013/10/26 职场文书
食堂个人先进事迹
2014/01/22 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
迎国庆演讲稿
2014/09/15 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
个人政风行风自查自纠报告
2014/10/21 职场文书
新郎新娘答谢词
2015/01/04 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
教师调动申请报告
2015/05/18 职场文书
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS