<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        vue登錄注冊及token驗證實現代碼

        來源:懂視網 責編:小采 時間:2020-11-27 22:23:38
        文檔

        vue登錄注冊及token驗證實現代碼

        vue登錄注冊及token驗證實現代碼:在大多數網站中,實現登錄注冊都是結合本地存儲cookie、localStorage和請求時驗證token等技術。而對于某些功能頁面,會嘗試獲取本地存儲中的token進行判斷,存在則可進入,否則跳到登錄頁或彈出登錄框。 而在vue單頁中,我們可以通過監控route對象,從中
        推薦度:
        導讀vue登錄注冊及token驗證實現代碼:在大多數網站中,實現登錄注冊都是結合本地存儲cookie、localStorage和請求時驗證token等技術。而對于某些功能頁面,會嘗試獲取本地存儲中的token進行判斷,存在則可進入,否則跳到登錄頁或彈出登錄框。 而在vue單頁中,我們可以通過監控route對象,從中

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

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

        具體實現代碼如下:

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

        <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驗證實現代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        vue登錄注冊及token驗證實現代碼

        vue登錄注冊及token驗證實現代碼:在大多數網站中,實現登錄注冊都是結合本地存儲cookie、localStorage和請求時驗證token等技術。而對于某些功能頁面,會嘗試獲取本地存儲中的token進行判斷,存在則可進入,否則跳到登錄頁或彈出登錄框。 而在vue單頁中,我們可以通過監控route對象,從中
        推薦度:
        標簽: 驗證 VUE 代碼
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 成年轻人网站色免费看| h视频免费高清在线观看| 97国产在线公开免费观看| 亚洲经典千人经典日产| **毛片免费观看久久精品| 少妇中文字幕乱码亚洲影视 | 亚洲人成7777| 在线观看片免费人成视频无码| 永久免费A∨片在线观看| 免费a级毛片无码a∨性按摩| 国产成人亚洲毛片| 亚洲成A人片在线观看无码3D| 高潮毛片无遮挡高清免费视频| 久久亚洲国产精品123区| 西西人体免费视频| 7777久久亚洲中文字幕蜜桃 | 华人在线精品免费观看| 久久国产精品亚洲综合 | 久久国产乱子免费精品| 91午夜精品亚洲一区二区三区| 久久久久久国产精品免费免费| 亚洲国产精品久久久久秋霞小| 亚洲成a人在线看天堂无码| 国产又黄又爽胸又大免费视频| 无码乱人伦一区二区亚洲一| 在线观看免费人成视频| 亚洲精品无码久久| 亚洲中文字幕无码一区 | 久久精品无码专区免费东京热| 亚洲天堂福利视频| 国产又粗又长又硬免费视频| 中文字幕无码日韩专区免费 | 亚洲中文字幕日产乱码高清app| 中文字幕无码免费久久| 国产午夜亚洲精品国产| 亚洲а∨天堂久久精品| 免费人成视频在线观看网站| 亚洲日韩v无码中文字幕| 全部免费毛片在线播放| 亚洲国产成人精品无码区二本| 亚洲精品无码久久久影院相关影片|