vue.js中实现登录控制的方法示例
本文实例讲述了vue.js中实现登录控制的方法。分享给大家供大家参考,具体如下:
vue中使用vue-router实现登录的控制在做后台管理系统中很常见,但是不想之前熟悉的流程那样,不过只要大家理解vue-router的使用也是很好实现的。
首先我们需要编写登录页面和主页面:
管理后台 管理员: 密码: Copyright©2017-{{getNowDate()}}Tujiawang
上面的登录页面注意:login方法中登录成功需要写入sessionStorage以便路由进行判断
最主要的是路由文件中的内容:
importVuefrom'vue' importRouterfrom'vue-router' Vue.use(Router) constroutes=[ { 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)} } ] } ]; constrouter=newRouter({ 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页面 } } }) exportdefaultrouter
目前这个只是简单的处理,这种方法官方叫做路由守卫,还有一种写法就是在meta中添加是否需要登录的控制,在beforeEach中来判断,和上面方法一样的。
希望本文所述对大家vue.js程序设计有所帮助。