首页 / VUE / vue.js中实现登录控制的方法示例
vue.js中实现登录控制的方法示例
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue.js中实现登录控制的方法示例,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3662字,纯文字阅读大概需要6分钟。
内容图文
![vue.js中实现登录控制的方法示例](/upload/InfoBanner/zyjiaocheng/338/07b4853033fc4c4bb451b31351d67829.jpg)
本文实例讲述了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程序设计有所帮助。
内容总结
以上是互联网集市为您收集整理的vue.js中实现登录控制的方法示例全部内容,希望文章能够帮你解决vue.js中实现登录控制的方法示例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。