vue路由控制url直接跳转（记录）

背景：springboot+vue+shiro前后端分离项目，遭遇越权问题，后台数据可由shiro进行权限控制，但前端可以进行无权限登录账户直接输入url跳转。

目的：控制页面跳转

之前在每个路由加入了beforeEnter的路由独享守卫，根据登录用户的权限控制跳转，但遇到奇怪的问题，没有对登录路由添加导航，但登录时不时出现无法跳转的问题，没有搞清楚是怎么回事，于是改为添加meta参数，给Router设置全局前置导航守卫beforeEach，用来判断用户的权限是否符合路由的meta中roles的值。

之前的做法：

{
    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：

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:

import router from './router'
import store from './store'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import {Message} from 'element-ui';

NProgress.configure({ showSpinner: true }) // NProgress Configuration

router.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()
})

---