好资源导航 » 文章资讯 » vue.js中实现登录控制的方法示例

vue.js中实现登录控制的方法示例

2023-09-13 19:43:04 40

本文实例讲述了vue.js中实现登录控制的方法。分享给大家供大家参考，具体如下：

vue中使用vue-router实现登录的控制在做后台管理系统中很常见，但是不想之前熟悉的流程那样，不过只要大家理解vue-router的使用也是很好实现的。

首先我们需要编写登录页面和主页面：

上面的登录页面注意：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程序设计有所帮助。

返回顶部
514930285
czq8825@qq.com

vue.js中实现登录控制的方法示例

热门推荐

随机推荐