VUE設(shè)置控制守衛(wèi)，未登錄時自動跳轉(zhuǎn)到登錄頁，登錄后正常訪問

發(fā)布時間：2020-02-26 10:14:01 來源：網(wǎng)絡(luò) 閱讀：294 作者：o鳳舞九天o 欄目：開發(fā)技術(shù)

index.js中設(shè)置如下內(nèi)容：

const router = new Router({

? routes: [

? ? {

? ? ? path: '/',

? ? ? name: 'HelloWorld',

? ? ? component: HelloWorld,

? ? ? meta:{requireAuth:true}

? ? },

? ? {

? ? ? path: '/login',

? ? ? name: 'login',

? ? ? component: Login

? ? },

? ? {

? ? ? path: '/index',

? ? ? name: 'index',

? ? ? component: index,

? ? ? meta:{requireAuth:true}

? ? },

? ]

});

router.beforeEach((to, from, next) => {

?//requireAuth對應(yīng)上面每個跳轉(zhuǎn)的 meta:{requireAuth:true},

?//配置上說明訪問該路徑時需要檢測是否登錄狀態(tài)

?if(to.meta.requireAuth) {

? ?//sessionStorage可直接使用，無需引入

? ?//在登錄頁，點擊登錄按鈕后設(shè)置sessionStorage.setItem("key","value")

? ?//通過sessionStorage.getItem("account")獲取，如果有值則是登錄狀態(tài),無值則為未登錄，自動跳轉(zhuǎn)到登錄頁

? ?if(sessionStorage.getItem("account") == null) {??

? ? ? next('/login');? ? ??

? ?}else{? ? ?

? ? ?next();

? ? }

?else{

? ? next();

});

export default router;

向AI問一下細節(jié)

VUE設(shè)置控制守衛(wèi)，未登錄時自動跳轉(zhuǎn)到登錄頁，登錄后正常訪問