若依vue版前端白名单处理

需求如下：需要直接访问系统某个界面并且不需要登录
找到permission.js文件

NProgress.configure({ showSpinner: false });

const whiteList = ['/login', '/register'];

router.beforeEach((to, from, next) => {
  NProgress.start()

在这个whiteList 添加界面的url就可以直接访问并且不需要登录（也就是白名单）
不过还需要注意的是填写的url不能是数据库的动态路由，所以我们要找到路由的js文件手动添加路由（该路由也不能跟动态路由重复）

也就是在router文件夹内的index.js文件，在公共路由内加入你的url。
下面是代码展示

permission.js

//实现能够存储正则表达式
const whiteList = ['/login', '/register', new RegExp('^/fygl/')];
。。。。。。。。。。。。。省略。。。。。。。。。。。。
    // 没有token
    // if (whiteList.indexOf(to.path) !== -1) {
    if (whiteList.some(whitelistItem => {
      if (typeof whitelistItem === 'string') {
        return to.path === whitelistItem;
      } else if (whitelistItem instanceof RegExp) {
        return whitelistItem.test(to.path);
      }
      return false;
    })) {
      // 在免登录白名单，直接进入
      next()
    } else {
      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
      NProgress.done()
    }

index.js

// 公共路由
export const constantRoutes = [
  //  path不能跟自动生成的path相同不然就不显示
  {
    path: '/fygl/hz/add',
    component: Layout,
    hidden: true,
    permissions: ['fygl:hz:list'],
    children: [
      {
        path: 'add',
        component: () => import('@/views/fygl/hz/add'),
        name: 'fygladd',
        meta: { title: '母婴传播消除工作主要指标统计添加', activeMenu: '/fygl/hz/add' }
      }
    ]
  },

不过需要注意的是因为没有登录，所以左侧的导航栏是没权下查数据库的，所以可以在index.js中去掉 component: Layout,这样就直接展示界面而不展示导航栏了。