vue使用者登入狀態判斷

2022-02-05 15:12:48 字數 1794 閱讀 4103

之前專案中用來判斷是否登入我寫了多種方案,但是最終只有乙個方案是比較好的,這篇部落格就是分享該方案;

先說基本要求:

判斷登入方案需要滿足下面幾點:

未登入狀態下的重新整理:

1.1 在需要登入頁面中重新整理是需要跳轉到登入頁的;

1.2 在不需要登入的頁面中重新整理,不需要跳轉;

在未登入狀態下,跳轉到需要登入頁面時,會直接跳轉到登入頁;

先在路由檔案裡修改:

export default ,

children: [

//子頁面

]}

假如上面的**是乙個使用者中心的路由,他是主頁面,其他都是他的子頁面,那麼只需要在meta裡新增requirelogin:true一次就行了,子頁面不需要修改什麼;

在 main.js 裡新增:

axios.interceptors.response.use(

response =>

})//如果需要可以在這裡將 vuex 裡的 user 改為空物件

}//顯示錯誤資訊

return promise.reject(response.data)

}if(response.data.code === 0)

}, error => );

router.beforeeach((to, from, next) => ') })

}else

} else

});

根據 user 是否為乙個空物件來判斷本地登入狀態;

created()
每一次重新整理都會觸發該函式,作用是判斷登入狀態和獲取最新的資訊;

在 vuex/index 新增:

const store = new vuex.store('),

},mutations: ,

},actions: ));

}).catch(err => );

if (router.currentroute.matched.some(record => record.meta.requirelogin)) })}

})},

}})

在某頁面下重新整理,可以根據是否為需登入頁面進行判斷,並且已登入可以更新使用者資訊;

使用者的資訊都是儲存在 localstorage 裡來成為預設值,但是 ajax 連線失敗的話,會變為空;

!!注意!!

上面的方法適用的是,不知道後台的登入儲存時間,然而,如果你知道後台的登入狀態儲存時間的話,我想可以有一種更好的方法,即 cookie

因為 cookie 會有乙個儲存的時間, 進入乙個頁面判斷是否存在;

還可以使用 web workers ,在後台新增乙個計時器,每一段時間判斷 cookie 是否存在,不過 cookie 能儲存的東西不多,還有 ie 對web workers 是不支援的,所以最好在 main 裡判斷一下頁面是否對 web workers ;

放下我之前專案所用的登入檢查方式:

let haslogin = false // 是否登入過

// 登入攔截

router.beforeeach((to, from, next) => else else )

}} catch (e) )}}

} else else )

}next(})}}

})

完;

C MVC 使用者登入狀態判斷

在filters資料夾下新增乙個類authenticationattribute 如下 登入認證特性 public class authenticationattribute actionfilterattribute base onactionexecuting filtercontext 在co...

VUE登入路由判斷

我們在做無論是 還是電商的時候,登入是我們必不可少的乙個功能,當我們從登入介面進行登入操作的時候,如果登入成功,我們希望進入到主介面。如果我們是在其他介面進行登入,則我們希望我們登入之後是返回到那個其他介面,這樣使用者也感覺到更友好。然而歷史頁面跳轉到登入頁面的情況一般是三種 1 從註冊頁面到登入介...

判斷使用者是否登入

使用者中心頁面規定 當使用者登入後,才能訪問使用者中心 如果使用者未登入,就不允許訪問使用者中心,將使用者引導到登入介面 如果已經登陸 request.user.is authenticated true 如果未登陸 request.user.is authenticated false 獲取使用者...