vue路由权限校验

引言

做后台系统的时候，难免会有用户权限的判断。admin可以查看全部菜单，user只能查看部分菜单。

一开始接触这个需求的时候，完全是纯前端做的。在配置路由的时候，加一个roles的属性，通过判断用户的roles是否与路由的roles属性相匹配来作为显示隐藏的依据

 {
  path: '/router',
  name: 'router',
  meta: {
    title: '标题',
    roles: ['admin','user']
  },
  component: index,
  children: [
    {
      path: 'children',
      name: 'children',
      meta: {
        title: '子标题',
        roles: ['admin','user']
      },
      component: child
    }
  ]
}

// 过滤路由 menuList-菜单 roles-用户角色
const checkMenuList = (menuList, roles) => {
  for (let i = 0; i < menuList.length; i++) {
    if (!compareEqual(roles, menuList[i].meta.roles) || menuList[i].meta.noRenderTree) {
      menuList.splice(i, 1)
      i -= 1
    } else {
      if (menuList[i].children) {
        checkMenuList(menuList[i].children, roles)
      }
    }
  }
  return menuList
}

这样做确实可以实现给不同用户展示不同的菜单。但是如果用户权限发生改变，前端就需要发版。本着万物皆可灵活配置的原则。

需求

首先我们要了解，我们要做什么。

我们希望我们可以通过用户权限配置功能，达到灵活配置路由权限，由服务器端返回需要展示的路由权限，前端做展示。

思路

1. 前端配置好项目全部页面的路由
2. 服务器端返回该用户的权限列表，前端去匹配，最后返回一个路由列表，作为菜单
3. 为了更好的用户体验，当用户输入异常的路由时，我们要重定向到一个404页面，提示用户该页面不存在。
4. 基于第3点，我们在每次跳转的时候，还需要判断这个页面是否存在，该用户是否有权限进行跳转

实现

ok 思路整理完了。现在就开始来实现吧！

首先，routers是需要在前端注册，我们要先配置整个页面的routers。

除了系统的菜单之外，我们还需要配置403错误页面，还有login、首页这些基本路由。由于系统菜单还需要与服务器端返回的路由列表进行匹配，暂时不进行注册

// router.js

 // 基本路由
export const defaultRouter = [
  { path: '/', component: index }, // 首页
  { path: '/login', name: 'login', component: login } // 登录页
 ]
 
 // 项目全部页面
export const appRouter = [
   {
    path: '/router1',
    name: 'router1',
    redirect: '/router1/test1',
    component: router1,
    meta: { title: '路由1'},
    children: [
      { path: 'test1', name: 'test1', component: test1, meta: { title: '测试1' } },
      { path: 'test2', name: 'test2', component: test1, meta: { title: '测试2' } }
    ]
  },
 ]
 // 这个是我们页面初始化时候，注册的routes
const routers = [ 
  ...defaultRouter
]
const RouterConfig = {
  routes: routers
}
const router = new VueRouter(RouterConfig)

全部路由都注册完了，接下来就要匹配用户可访问的路由了，这一步需要和服务器端一起约定规则。

// 服务器端返回的键值对：  路由名：是否有权限
authRouter:{
    'test1': false,
    'test2': true
}

拿到服务器端返回的用户权限之后，就开始过滤路由

// 过滤路由 appRouterCopy-项目全部页面 authRouter-权限列表
const checkMenuList = (appRouterCopy, authRouter) => {
    for (let i = 0; i < appRouterCopy.length; i++) {
        let {name, children} = appRouterCopy[i]
        if (authRouter[name] === false) {
            appRouterCopy.splice(i, 1)
            i--
        } else if (children && children.length) {
            checkMenuList(children, authRouter)
        }
    }
}

得到过滤后的路由之后，使用addRoutes进行注册。注意404路由配置要在最后加上。

let error404Page = { path: '/*', name: 'error-404', meta: { title: '404-页面不存在'}, component: error404Page}
router.addRoutes([...appRouterCopy, error404Page])

到此我们就得到了用户有权限的页面了，可以把得到的列表作为系统菜单渲染上去。接下来就要处理一下跳转异常的状况了。需要用到beforeEach对每次跳转进行拦截判断

router.beforeEach(((to, from, next) => {
    if (isNotLog && to.name !== 'login') {
        // 未登录 跳转到登录页
         next({ name: 'login' })
    } else if (to.name && (to.name === 'login' || to.name.indexOf('error') !== -1)){
        // 跳转异常
        next()
    } else {
        // 校验用户权限
        checkUser(next, to ,router)
    }
})

const checkUser = async (next, to ,router) => {
    if (isNotUser) {
        // 首次登陆系统，没有用户信息的时候 需要获取用户信息做过滤路由的操作
        const authRouter = getAuthRouter() // 获取用户权限
        checkMenuList(appRouterCopy, authRouter)
        const error404Page = { path: '/*', name: 'error-404', meta: { title: '404-页面不存在'}, component: error404Page}
        router.addRoutes([...appRouterCopy, error404Page])
        if (!appRouterCopy.length) {
            // 用户没有有权限的路由 可以跳转到404或者登录页
            next({ ...error404Page, replace: true })
        } else {
            next({ ...to, replace: true })
        }
    } else {
        next()
    }
}