vue登錄注冊及token驗證


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

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


// 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對象。原理同上

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

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM