本文实例讲述了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实现一个SPA登录页面的过程【推荐】
- vue.js实现用户评论、登录、注册、及修改信息功能
- Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
- 使用Vue.js和Element-UI做一个简单登录页面的实例
- 基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
- Vue.js实现可配置的登录表单代码详解
- Vue学习之路之登录注册实例代码
- vue路由跳转时判断用户是否登录功能的实现
- 详解Vuex管理登录状态
- Vue中保存用户登录状态实例代码
