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

Question

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

Answer 1

这个需要一个导航守卫来判断，传送门https://router.vuejs.org/zh-c...

Answer 2

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');
}

}
})

Answer 3

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

Answer 4

来拆分一下题主的要求

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

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