用户登陆?vue?生命周期?

用vue写了一个注册登录页面。现在登录成功用localStorage将登录成功后的数据缓存在本地,但是我想实现一个功能就是,进入APP如果已经登录就直接进去APP首页,如果未登录进来APP就是登录页面,登录完成后进去个人中心,就能来回点击底部导航切换页面了。求大神指教改怎么写

阅读 2.7k
4 个回答

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、你可以在根组件created下判断localStorage存储的用户是否不存在就跳转登录页,存在逻辑自己处理。
2、或者使用beforeEach具体自行查文档。

来拆分一下题主的要求

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.登录完成后进去个人中心
这个在你的登录接口里面判断就好了,如果登录成功,就跳转到个人中心去

这里再啰嗦一句,如果后端做了登录时效的限制,如上判断会存在用户已经登录超时,但缓存是在的情况。
此时就变成用户明明登录了,却得不到界面数据。
解决方法是,你可以在你封装的接口中判断(假设你封装了),接口返回的状态码是不是用户未登录或超时(和后端沟通用户未登录或登录超时的状态码是什么),如果是,则跳转到登陆页

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题