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

Question

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

Answer 1

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 2

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

Answer 3

来拆分一下题主的要求 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.登录完成后进去个人中心这个在你的登录接口里面判断就好了，如果登录成功，就跳转到个人中心去 这里再啰嗦一句，如果后端做了登录时效的限制，如上判断会存在用户已经登录超时，但缓存是在的情况。此时就变成用户明明登录了，却得不到界面数据。解决方法是，你可以在你封装的接口中判断（假设你封装了），接口返回的状态码是不是用户未登录或超时（和后端沟通用户未登录或登录超时的状态码是什么），如果是，则跳转到登陆页