vue.js中实现登录控制的方法示例
时间:2019-04-14
本文章向大家介绍vue.js中实现登录控制的方法示例,主要包括vue.js中实现登录控制的方法示例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例讲述了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程序设计有所帮助。
- BZOJ 3097: Hash Killer I【构造题,思维题】
- Python Selenium设计模式-POM
- BZOJ 1207: [HNOI2004]打鼹鼠【妥妥的n^2爆搜,dp】
- HDU 1711 Number Sequence(KMP裸题,板子题,有坑点)
- BZOJ 2222: [Cqoi2006]猜数游戏【神奇的做法,傻逼题,猜结论】
- BZOJ 1257: [CQOI2007]余数之和sum【神奇的做法,思维题】
- 洛谷 P1019 单词接龙【经典DFS,温习搜索】
- MVCforum 支持多国语言
- BZOJ 1012: [JSOI2008]最大数maxnumber【线段树单点更新求最值,单调队列,多解】
- BZOJ 1303: [CQOI2009]中位数图【前缀和】
- 高斯消元模版
- HDU 1728 逃离迷宫(DFS经典题,比赛手残写废题)
- 洛谷 P1219 八皇后【经典DFS,温习搜索】
- KVM基于内核的虚拟机概念理解与客户机浅析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 数据结构回顾及展望(二)(3.22更新)
- Windows挂载CFS文件系统
- XMU oj Problem List
- Python入门笔记(安装及初步使用)
- python 入门笔记[语法基础(上)]
- 怎样解决 JavaScript 生态中第三方安全性问题?
- 【Hadoop 分布式部署 十:配置HDFS 的HA、启动HA中的各个守护进程】
- 【Hadoop 分布式部署 十 一: NameNode HA 自动故障转移】
- Hive安装部署及简单测试 网页《一》
- Hive初步使用、安装MySQL 、Hive配置MetaStore、配置Hive日志《二》
- Python - lambda函数
- Oracle 基础学习笔记
- 算法【最大子序列问题】
- 【算法、递归回溯解决数独】
- Anaconda使用命令