vue 页面权限控制_vue控制页面权限

（一）通过配置路由 meta 以及路由守卫来实现

在每一个路由的 meta 属性里，将能访问该路由的角色添加到 roles 里。用户每次登陆后，获取用户的角色。

然后在访问页面时，把路由的 meta 属性和用户的角色进行对比，如果用户的角色在路由的 roles 里，那就是能访问，如果不在就拒绝访问 或者 弹出提示

代码：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import NoAccess from '@/components/NoAccess'
 
Vue.use(Router)
 
const router = new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {
        roles: ['admain', 'users']
      }
    },
    {
      path: '/NoAccess',
      name: 'NoAccess',
      component: NoAccess
    }
  ]
})
 
// 模拟角色
const userRole = 'users'
 
// router 是 Router 的实例
router.beforeEach((to, from, next) => {
  // 说明该路由有权限校验
  if (to.meta.roles) {
    // 校验身份
    if (to.meta.roles.includes(userRole)) {
      next()
    } else {
      next('/NoAccess')
    }
  } else { // 没权限直接跳过
    next()
  }
})
 
export default router

（二）登录验证

网站一般只要登陆过一次后，接下来该网站的其他页面都是可以直接访问的，不用再次登陆。

我们可以通过 token 或 cookie 来实现，下面用代码来展示一下如何用 token 控制登陆验证

也是通过 路由守卫 beforeEach 来实现的

router.beforeEach((to, from, next) => {
    // 如果有token 说明该用户已登陆
    if (localStorage.getItem('token')) {
        // 在已登陆的情况下访问登陆页会重定向到首页
        if (to.path === '/login') {
            next({path: '/'})
        } else {
            next({path: to.path || '/'})
        }
    } else {
        // 没有登陆则访问任何页面都重定向到登陆页
        if (to.path === '/login') {
            next()
        } else {
            next(`/login?redirect=${to.path}`)
        }
    }
})

（三）动态路由

用户根据不同的角色生成相应的路由列表

router.addRoutes(routerArrayConfig)

代码：

const router = new Router({
    routes: [
        {
            path: '/login',
            name: 'login',
            component: () => import('../components/Login.vue')
        },
        {
            path: '/', 
            redirect: '/home'
            component: () => import('../components/Home.vue')
        },
    ]   
})

与下方相同：

const router = new Router({
    routes: [
        {
            path: '/', 
            redirect: '/home'
        },
    ]   
})
 
router.addRoutes([
    {
        path: '/login',
        name: 'login',
        component: () => import('../components/Login.vue')
    }
])

所以可能后端返回 一个列表，前端通过数组循环等处理方式，变成真正的路由导入