vue.js中实现登录控制的方法示例
发布时间：2020-12-17 02:19:34 所属栏目：百科 来源：网络整理
导读：本篇章节讲解vue.js中实现登录控制的方法。供大家参考研究具体如下： vue中使用vue-router实现登录的控制在做后台管理系统中很常见，但是不想之前熟悉的流程那样，不过只要大家理解vue-router的使用也是很好实现的。 首先我们需要编写登录页面和主
|
本篇章节讲解vue.js中实现登录控制的方法。分享给大家供大家参考，具体如下： vue中使用vue-router实现登录的控制在做后台管理系统中很常见，但是不想之前熟悉的流程那样，不过只要大家理解vue-router的使用也是很好实现的。 首先我们需要编写登录页面和主页面： 上面的登录页面注意：login方法中登录成功需要写入sessionStorage以便路由进行判断 最主要的是路由文件中的内容： {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',redirect: 'vips/list',children: [{
path: 'list',meta: {
id:0
},component: (resolve)=>{require(['../components/VipsList'],resolve)}
},{
path: 'detail',component: (resolve)=>{require(['../components/VipsDetail'],{
path: 'userlog',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程序设计有所帮助。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |