首页 / VUE / vue.js怎么做出登录控制功能
vue.js怎么做出登录控制功能
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue.js怎么做出登录控制功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3710字，纯文字阅读大概需要6分钟。
内容图文
这次给大家带来vue.js怎么做出登录控制功能，vue.js做出登录控制功能的注意事项有哪些，下面就是实战案例，一起来看一下。vue中使用vue-router实现登录的控制在做后台管理系统中很常见，但是不想之前熟悉的流程那样，不过只要大家理解vue-router的使用也是很好实现的。
首先我们需要编写登录页面和主页面：
<template>
<p 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>
</p>
</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相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
swiper操作图片步骤详解
Angular4性能优化方法总结
以上就是vue.js怎么做出登录控制功能的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的vue.js怎么做出登录控制功能全部内容，希望文章能够帮你解决vue.js怎么做出登录控制功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】