登錄攔截設置白名單-坑

 需求

　　登錄攔截的時候我們一般會寫一個permision.js放在main.js中，當頁面每登錄的時候會跳轉到登錄頁面

看代碼：

分析： 

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

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

2、如果沒登錄，首先會從白名單里面去過濾，如果白名單有不需要跳登錄頁面，白名單沒有直接跳登錄頁面

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

3、現在開始說我遇到的坑

　　首先我試驗幾個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

這樣打包以后也沒有上面的問題啦！

有遇到相同問題的同學可以留言交流 ^_^