当前位置:首页 » 《随便一记》 » 正文

若依vue版前端白名单处理

18 人参与  2024年11月06日 09:22  分类 : 《随便一记》  评论

点击全文阅读


需求如下:需要直接访问系统某个界面并且不需要登录
找到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,这样就直接展示界面而不展示导航栏了。


点击全文阅读


本文链接:http://zhangshiyu.com/post/183067.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1