登录拦截设置白名单-坑

 需求

　　登录拦截的时候我们一般会写一个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

这样打包以后也没有上面的问题啦！

有遇到相同问题的同学可以留言交流 ^_^