登陆拦截设置白名单-坑

 需求

　　登陆拦截的时候咱们通常会写一个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

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

有遇到相同问题的同窗能够留言交流 ^_^