鍍金池/ 問(wèn)答/HTML/ vue中登錄成功跳轉(zhuǎn)列表頁(yè),判斷l(xiāng)ocalstorge里沒(méi)值讓它返回登錄頁(yè)。

vue中登錄成功跳轉(zhuǎn)列表頁(yè),判斷l(xiāng)ocalstorge里沒(méi)值讓它返回登錄頁(yè)。

clipboard.png
登錄成功后提交返回?cái)?shù)據(jù)到vuex然后保存到localstrage并跳轉(zhuǎn)列表頁(yè)notelist.vue

clipboard.png

clipboard.png

clipboard.png
home.vue通過(guò)getter獲取vuex里的用戶(hù)名和頭像。

clipboard.png

注銷(xiāo)后清空vuex和localstorge,既然沒(méi)登錄那就肯定不能直接輸入url訪問(wèn)列表頁(yè)
所以我再notelist.vue的mounted里加了判斷
clipboard.png
如果localstorage里沒(méi)值代表沒(méi)登錄跳轉(zhuǎn)登錄頁(yè),但是這樣寫(xiě)卻無(wú)效果,不會(huì)跳轉(zhuǎn)刷新,并且沒(méi)登錄訪問(wèn)http://localhost:8086/#/notemanager/notelist頁(yè)面一片空白,請(qǐng)問(wèn)這是為什么呢?在created鉤子里寫(xiě)也是這樣。

回答
編輯回答
墨沫

https://github.com/qinouz/vue... 我自己寫(xiě)的一個(gè) vuex 小工具 看得懂你就用能解決你的問(wèn)題

2018年4月3日 07:37
編輯回答
敢試

建議你在路由跳轉(zhuǎn)的時(shí)候做訪問(wèn)控制,這樣便于邏輯處理
類(lèi)似于這種寫(xiě)法,寫(xiě)在路由的js里,僅供參考

const router = new VueRouter({
  // mode: 'history',
  routes
});
router.beforeEach((to, from, next) => {
  if (to.matched.some(r => r.meta.requireAuth)) {
    if (store.state.token) {
      next();
    } else {
      next({
        path: '/login',
      })
    }
  } else {
    next();
  }
})
2018年3月12日 20:08