用vue写了一个注册登录页面。现在登录成功用localStorage将登录成功后的数据缓存在本地,但是我想实现一个功能就是,进入APP如果已经登录就直接进去APP首页,如果未登录进来APP就是登录页面,登录完成后进去个人中心,就能来回点击底部导航切换页面了。求大神指教改怎么写
用vue写了一个注册登录页面。现在登录成功用localStorage将登录成功后的数据缓存在本地,但是我想实现一个功能就是,进入APP如果已经登录就直接进去APP首页,如果未登录进来APP就是登录页面,登录完成后进去个人中心,就能来回点击底部导航切换页面了。求大神指教改怎么写
router.beforeEach((to, from, next) => {
var userInfo= JSON.parse(sessionStorage.getItem('userInfoStorage'));//获取浏览器缓存的用户信息
if(userInfo){//如果有就直接到首页咯
next();
}else{
if(to.path=='/login'){//如果是登录页面路径,就直接next()
next();
}else{//不然就跳转到登录;
next('/login');
}
}
})
来拆分一下题主的要求
1.进入APP如果已经登录就直接进去APP首页这里需要做2步:a.将app的入口链接设置成你的app首页链接;2.在全局前置守卫中判断是否存有数据(这里注意后端么有设置超时,否则不要这么干),如果有则进入首页,没有则进入登录页
router.beforeEach((to, from, next) => {
// 如果存的有数据或者是去登陆页,那就尽管它操作
if (localStorage.getItem('user_data') || to.fullPath === '/login') {
next()
} else {
// 如果不是就跳转到登录页
next({ path: '/login' })
}
})
2.如果未登录进来APP就是登录页面答案如上
3.登录完成后进去个人中心这个在你的登录接口里面判断就好了,如果登录成功,就跳转到个人中心去
这里再啰嗦一句,如果后端做了登录时效的限制,如上判断会存在用户已经登录超时,但缓存是在的情况。
此时就变成用户明明登录了,却得不到界面数据。
解决方法是,你可以在你封装的接口中判断(假设你封装了),接口返回的状态码是不是用户未登录或超时(和后端沟通用户未登录或登录超时的状态码是什么),如果是,则跳转到登陆页
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
这个需要一个导航守卫来判断,传送门https://router.vuejs.org/zh-c...