在大多數(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.jsimport 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 router2. 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)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
