在大多數網站中，實現登錄注冊都是結合本地存儲cookie、localStorage和請求時驗證token等技術。而對于某些功能頁面，會嘗試獲取本地存儲中的token進行判斷，存在則可進入，否則跳到登錄頁或彈出登錄框。

而在vue單頁中，我們可以通過監控route對象，從中匹配信息去決定是否驗證token，然后定義后續行為。

具體實現代碼如下：

1. 利用router.beforeEach鉤子, 判斷目標路由是否攜帶了相關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 router

2. watch route對象。原理同上。

<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>

總結

以上所述是小編給大家介紹的vue登錄注冊及token驗證實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！