vue登錄注冊(cè)及token驗(yàn)證實(shí)現(xiàn)代碼
在大多數(shù)網(wǎng)站中，實(shí)現(xiàn)登錄注冊(cè)都是結(jié)合本地存儲(chǔ)cookie、localStorage和請(qǐng)求時(shí)驗(yàn)證token等技術(shù)。而對(duì)于某些功能頁(yè)面，會(huì)嘗試獲取本地存儲(chǔ)中的token進(jìn)行判斷，存在則可進(jìn)入，否則跳到登錄頁(yè)或彈出登錄框。
而在vue單頁(yè)中，我們可以通過(guò)監(jiān)控route對(duì)象，從中匹配信息去決定是否驗(yàn)證token，然后定義后續(xù)行為。
具體實(shí)現(xiàn)代碼如下：
1. 利用router.beforeEach鉤子, 判斷目標(biāo)路由是否攜帶了相關(guān)meta信息
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
component: require('./views/Home'),
meta: {
requiresAuth: true
}
},
]
const router = new VueRouter({
routes: routes
})
router.beforeEach((to, from, next) => {
let token = window.localStorage.getItem('token')
if (to.matched.some(record => record.meta.requiresAuth) && (!token || token === null)) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
})
export default router
2. watch route對(duì)象。原理同上。
<script>
// App.vue
export default {
watch:{
'$route':function(to,from){
let token = window.localStorage.getItem('token');
if (to.matched.some(record => record.meta.requiresAuth) && (!token || token === null)) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
}
}
}
</script>
總結(jié)
以上所述是小編給大家介紹的vue登錄注冊(cè)及token驗(yàn)證實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
詳解在vue-cli項(xiàng)目下簡(jiǎn)單使用mockjs模擬數(shù)據(jù)
這篇文章主要介紹了詳解在vue-cli項(xiàng)目下簡(jiǎn)單使用mockjs模擬數(shù)據(jù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
Vue實(shí)現(xiàn)下拉滾動(dòng)加載數(shù)據(jù)的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)下拉滾動(dòng)加載數(shù)據(jù)的示例，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
vue-element-admin關(guān)閉eslint的校驗(yàn)方式
這篇文章主要介紹了vue-element-admin關(guān)閉eslint的校驗(yàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
本文主要介紹了Vue3中10多種組件通訊方法小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue 右鍵菜單插件 簡(jiǎn)單、可擴(kuò)展、樣式自定義的右鍵菜單
這篇文章主要介紹了vue 右鍵菜單插件 簡(jiǎn)單、可擴(kuò)展、樣式自定義的右鍵菜單，本文給大家分享個(gè)例子，給大家及時(shí)的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-11-11
Vue在啟動(dòng)時(shí)卡住了,啟動(dòng)不了的問(wèn)題及解決
這篇文章主要介紹了Vue在啟動(dòng)時(shí)卡住了,啟動(dòng)不了的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
在實(shí)際項(xiàng)目開發(fā)中,幾乎每個(gè)組件中都會(huì)用到?axios?發(fā)起數(shù)據(jù)請(qǐng)求,下面這篇文章主要給大家總結(jié)介紹了關(guān)于Vue3全局配置axios的兩種方式,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
自定義指令是 vue 中使用頻率僅次于組件，其包含 bind 、 inserted 、 update 、 componentUpdated 、 unbind 五個(gè)生命周期鉤子，接下來(lái)通過(guò)本文給大家詳細(xì)介紹Vue指令工作原理實(shí)現(xiàn)方法，需要的朋友參考下吧2021-06-06
vue項(xiàng)目如何配置public靜態(tài)資源路徑訪問(wèn)
這篇文章主要介紹了vue項(xiàng)目如何配置public靜態(tài)資源路徑訪問(wèn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue history模式刷新頁(yè)面404問(wèn)題及解決
文章介紹了Vue單頁(yè)應(yīng)用中出現(xiàn)404錯(cuò)誤的原因,以及如何通過(guò)配置Nginx和使用Vue Router的hash模式來(lái)解決這個(gè)問(wèn)題,同時(shí),文章還簡(jiǎn)要解釋了單頁(yè)應(yīng)用的概念及其優(yōu)點(diǎn)和缺點(diǎn),并討論了Router的實(shí)現(xiàn)方式2024-12-12