登陸攔截設置白名單-坑

 需求

　　登陸攔截的時候咱們通常會寫一個permision.js放在main.js中，當頁面每登陸的時候會跳轉到登陸頁面

看代碼：

分析： 

  一、我這裏設置了一個白名單數組 

whiteList = ['/login', '/regist', '/'] // 不重定向白名單

二、若是沒登陸，首先會從白名單裏面去過濾，若是白名單有不須要跳登陸頁面，白名單沒有直接跳登陸頁面

// 沒有登陸
  } else { if (whiteList.indexOf(to.path) !== -1) { next() } else { // 尚未登陸過 則跳轉到登陸界面
      next('/login') } }

三、如今開始說我遇到的坑

　　首先我試驗幾個indexOf的demo：

console.log(whiteList = ['/login', '/regist', '/'].indexOf('/')) > 2 undefined console.log(whiteList = ['/login', '/regist', '/'].indexOf('/login')) > 0 undefined console.log(whiteList = ['/login', '/regist', '/'].indexOf('/login/')) > -1 undefined console.log(whiteList = ['/login', '/regist', '/'].indexOf('/regist/')) >  -1

當我打包後，（使用history模式打包的），刷新頁面  to.path 取到的是 /login/,//regist/,因此致使了

if (whiteList.indexOf(to.path) !== -1)

條件不成立，直接跳到了

} else { // 尚未登陸過 則跳轉到登陸界面 next('/login') }

白名單沒生效!!!

可是我不打包在本地運行，to.path 末尾不會多一個/ ，是沒問題的，因爲有這個坑存在，我就棄用用白名單攔截的辦法！

附上白名單攔截的代碼：

import router from './router' import { getCookie } from './utils/auth'

// 經過beforeEach鉤子來判斷用戶是否登錄過 有無token
const whiteList = ['/login/', '/regist/', '/'] // 不重定向白名單
 router.beforeEach((to, from, next) => { console.log(to.matched) // 判斷是否有登陸過
  if (getCookie('userId_dev')) { // 若是包含userId_dev 從登陸頁面跳轉 直接跳轉到首頁 /
    if (to.path === '/login') { next('/smartHome/decIndex') } else { if (to.matched.length === 0) { next('/404') // 判斷此跳轉路由的來源路由是否存在，存在的狀況跳轉到來源路由，不然跳轉到404頁面
 } next() // 若是匹配到正確跳轉
 } // 沒有登陸
  } else { if (whiteList.indexOf(to.path) !== -1) { next() } else { // 尚未登陸過 則跳轉到登陸界面
      next('/login') } } })

 

下面，我會用另一種方法在登陸攔截：不會產生to.path有兩種狀況出現的坑了

代碼以下：permision.js

router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)) { // 判斷該路由是否須要登陸權限
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!getCookie('userId_dev')) { next({ name: 'login' }) } else { next() } // if (to.matched.length === 0) {
    // next({name: '404'}) // 判斷此跳轉路由的來源路由是否存在，存在的狀況跳轉到來源路由，不然跳轉到404頁面
    // }
  } else { next() // 確保必定要調用next()
 } })

route.js

每一個路由我都添加了一個meta屬性

requireAuth: true // 須要登陸才能進入的頁面能夠增長一個meta屬性

不須要登陸驗證的路由（‘/’,'login','/regist'）我這裏沒有設置 requireAuth

import Vue from 'vue' import Router from 'vue-router'
// 佈局組件
import Layout from '@/pages/Layout/Layout' Vue.use(Router) ... const baseRoute = [ { path: '/login', name: 'login', component: Login }, { path: '/regist', name: 'regist', component: Regist }, // 404page
  // { path: '/404', name: '404', component: page404 },
 { path: '/', name: 'home', component: Home }, { path: '/smartHome', name: 'smartHome', redirect: '/smartHome/decIndex', component: Layout, children: [ { path: 'decIndex', name: 'decIndex', component: ModeIndex, meta: { title: '', // 設備建模
          icon: '', requireAuth: true // 須要登陸才能進入的頁面能夠增長一個meta屬性
 } }, { path: 'project', name: 'project', component: Project, meta: { dynamic: true, // 動態麪包屑標題
          title: '', requireAuth: true // 須要登陸才能進入的頁面能夠增長一個meta屬性
 } }, { path: 'project/onlineEquip', name: 'onlineEquip', component: OnlineEquip, meta: { title: '查看當前在線設備', level: 2, hidden: true, hasProdKey: false, requireAuth: true // 須要登陸才能進入的頁面能夠增長一個meta屬性
 } }, { path: 'project/onlineEquip/debug', name: 'debug', component: Debug, meta: { title: '調試', level: 3, hidden: true, requireAuth: true // 須要登陸才能進入的頁面能夠增長一個meta屬性
 } }, { path: 'project/onlineEquip/detail/:id', name: 'detail', component: Detail, meta: { title: '設備詳情', level: 3, hidden: true, requireAuth: true // 須要登陸才能進入的頁面能夠增長一個meta屬性
 } }, { path: 'project/log', name: 'log', component: Log, meta: { title: '日誌', level: 2, hidden: true, requireAuth: true // 須要登陸才能進入的頁面能夠增長一個meta屬性
 } }, { path: 'project/myPhyModel', name: 'CreateModel', component: CreateModel, meta: { title: '個人物解析模型', level: 2, hidden: true, requireAuth: true // 須要登陸才能進入的頁面能夠增長一個meta屬性
 } }, { path: 'project/myPhyModel/detail', name: 'ModelDetail', component: ModelDetail, meta: { title: '模型詳情', level: 3, hidden: true, requireAuth: true // 須要登陸才能進入的頁面能夠增長一個meta屬性
 } }, { path: 'project/myPhyModel/debugModel', // 查看設備在線
        name: 'DebugModel', component: OnlineEquip, // 共用設備在線模塊
 meta: { title: '查看當前在線設備', level: 4, hidden: true, hasProdKey: true, requireAuth: true // 須要登陸才能進入的頁面能夠增長一個meta屬性
 } } ] }, { path: '*', // 頁面不存在的狀況下會跳到404頁面
    name: '404', component: page404 } ] const router = new Router({ mode: 'history', // 預渲染必定要模式改爲history
 routes: baseRoute }) export default router

這樣打包之後也沒有上面的問題啦！

有遇到相同問題的同窗能夠留言交流 ^_^