vue router 用户登陆功能的实例代码
有些路由页面需要用户登陆之后才能访问如（用户中心），如果用户没有登陆就访问这些页面的话就应该转换到登陆页面，登陆成功之后在进入该页面。
需要用到的知识点有：H5中的会话存储（sessionStorage）、vue-router路由前置操作、路由元信息(meta).
路由配置
在路由页面中添加auth字段信息用于验证当前路由页面是否需要登陆。
constrouter=newRouter({
mode:'history',
base:process.env.BASE_URL,
routes:[
{
path:"/login",
name:"login",
component:()=>import("./views/Login.vue")
},
{
path:"/member",
meta:{
auth:true//用于判断当前路由是否需要登陆
},
component:()=>import('./views/Member.vue')
}
]
});
全局前置操作
//登陆验证
constToken="XH-TOKEN";
router.beforeEach((to,from,next)=>{
letvalidator=typeofto.meta.auth=="undefined"||!to.meta.auth||sessionStorage.getItem(Token);
letresult=validator?{}:{
name:"login",//跳转到命名路由
query:{
url:to.fullPath//做一个来源页面，用于登陆成功之后跳转
}
};
next(result);
});
注意：登陆成功之后要用sesionStorage.setItem设置会话值
总结
以上所述是小编给大家介绍的vuerouter用户登陆功能的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！