请选择 进入手机版 | 继续访问电脑版

vue路由控制url直接跳转(记录)

[复制链接]
大胆 发表于 2021-1-2 19:02:05 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
配景:springboot+vue+shiro前后端分离项目,遭遇越权问题,配景数据可由shiro举行权限控制,但前端可以举行无权限登录账户直接输入url跳转。
目的:控制页面跳转
之前在每个路由到场了beforeEnter的路由独享守卫,根据登任命户的权限控制跳转,但遇到希奇的问题,没有对登录路由添加导航,但登录时不时出现无法跳转的问题,没有搞清楚是怎么回事,于是改为添加meta参数,给Router设置全局前置导航守卫beforeEach,用来判断用户的权限是否符合路由的meta中roles的值。
  1. {    path: '/',    component: Layout,    meta: {      roles: ['admin'],      keepAlive: false    },    children: [      {        path: '/unitManager',        name: 'unitManager',        component: () => import('../pages/UnitManager'),      },    ],    beforeEnter(to,form,next){        if (roleKey =='superAdmin'||roleKey == 'unitAdmin'){          next()        }else {          next({            path:'/'          })        }      }  },
复制代码
route.js:
  1. import Layout from '../components/Layout.vue'const Init = () => import('../components/Init.vue')const Login = () => import('../pages/Login.vue').........//以下省略export default [  // {  //   path: '*',  //   redirect: '/404'  // },  {    path: '/',    redirect: '/login'  },  /**********************************初始化*******************************/  {    path: '/certificateInit',    name: 'Init',    component: Init,    meta: {      //   roles:['admin']    }  },  {    path: '/login',    name: 'Login',    component: Login  },  {    path: '/',    component: Layout,    children: [      {        path: '/setting',        name: 'Setting',        component: Setting,      },    ]  },  {    path: '/',    component: Layout,    children: [      {        path: '/editPassword',        name: 'editPassword',        component: editPassword,      },    ]  },  /*超等管理员*/  /****************************单位账号管理****************************/  {    path: '/unitManager',    component: Layout,    children: [      {        path: '',        name: 'unitManager',        component: () => import('../pages/UnitManager'),        meta: { roles: ['unitAdmin', 'admin','superAdmin'] }      },      /****************************创建单位 ****************************/      {        path: '/unitCreate',        name: 'unitCreate',        component: resolve => require(['@/pages/UnitChild/Create'], resolve),        meta: {          roles: ['admin', 'unitAdmin','superAdmin'],        },      },      /****************************编辑单位 ****************************/      {        path: 'unitEdit',        name: 'unitEdit',        component: resolve => require(['@/pages/UnitChild/Edit'], resolve),        meta: {          roles: ['admin', 'unitAdmin','superAdmin'],        },      },      /****************************查察单位 ****************************/      {        path: '/unitDisplay',        name: 'unitDisplay',        component: resolve => require(['@/pages/UnitChild/Display'], resolve),        meta: {          roles: ['admin', 'unitAdmin','superAdmin'],        },      },      /****************************创建人员  ****************************/      {        path: '/userCreate',        name: 'userCreate',        component: resolve => require(['@/pages/User/Create'], resolve),        meta: {          roles: ['admin', 'unitAdmin','superAdmin'],        },      },..............................
复制代码
permission.js:
  1. import router from './router'import store from './store'import NProgress from 'nprogress' // progress barimport 'nprogress/nprogress.css' // progress bar styleimport {Message} from 'element-ui';NProgress.configure({ showSpinner: true }) // NProgress Configurationrouter.beforeEach((to, from, next) => {  // start progress bar  NProgress.start()  //console.log(`从 ${from.path} 到${to.path}`)  let user = store.getters.userInfo;    if(to.meta && to.meta.roles && to.meta.roles.length===0){//没有权限要求      next();    }    else if (to.path === '/login') {      // if is logged in, redirect to the home page         next()    } else {      // determine whether the user has obtained his permission roles through getInfo      if(!user){//有权限要求,且没有登录         next({ path: '/login' })       } else {        //判断当前脚色权限是否满意要求        if(to.meta.roles.includes(user.roleKey)){          next()        }else{//权限不满意,暂时先跳往登录页          Message.warning('权限不敷');          next({name:'Login'});        }      }    }})router.afterEach(() => {  // finish progress bar  NProgress.done()})
复制代码
 

来源:https://blog.csdn.net/IranLin/article/details/112002306
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )