vue 利用路由守衛判斷是否登入

2021-09-03 03:06:33 字數 978 閱讀 2922

1.首先你要研究通 router  物件,

2.當使用者想直接訪問首頁的時候,使用路由守衛判斷sessionstorage裡是否有物件,沒有全都乾到login中

3.登入成功後,登出操作,清除sessionstorage物件,跳轉login

4.我沒有寫後台, 通過匹配vuex中使用者物件,來判斷. 如果成功後把物件存到sessionstorage中,

import vue from 'vue'

import router from 'vue-router'

import demo from '@/components/demo'

import login from '@/components/login'

vue.use(router)

const router= new router(,

,]})

router.beforeeach((to,form,next)=>

let user = json.parse(sessionstorage.getitem("user"));

if(!user&&to.path!='/login'))

}else

})export default router;

2.登入頁面

登入

重置

3.首頁(登出)

加1          減1

登出

Vue路由守衛

js const router new vuerouter 前置的鉤子函式 最後要執行next 才會跳轉 router.beforeeach to,from,next 後置的鉤子函式 已經跳轉了不需要next router.aftereach to,from 主要是簡單介紹一下,路由守衛主要用於檢驗...

vue 路由守衛

正如其名,vue router提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中 全域性的,單個路由獨享的,或者元件級的。記住引數或查詢的改變並不會觸發進入 離開的導航守衛 可以使用router.beforeeach註冊乙個全域性前置守衛 import router f...

Vue路由守衛

我們在看一些網頁的時候如果想進一步了解一些東西的詳情資訊的話,當前的網頁就會讓我們進行登入,我們必須及逆行登入後才能夠看到我們想看到的詳情資訊,這個操作我們稱之為 路由守衛也是我們在做一些專案的時候必要進行的一步,如果我們不做這一步的話,自己所作專案中的所有的資料,不管是可以公共訪問的還是不能進行公...