vue后台管理系统之权限控制

目录

 

什么是权限控制？

如何实现权限控制

改进的解决方案

基本实现

登出再登入问题

页面刷新问题

---

什么是权限控制？

首先，我们按照最初的开发模式，在router.js中将所有的组件都注册在路由中.

import Vue from 'vue'
import Router from 'vue-router'
import { extend } from '../utils/router'

Vue.use(Router)
const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: () => import('../views/login')    //懒加载
    },
    {
      path: '/home',
      name: 'home',
      roles: ['guest', 'admin'],    //用于验证路由能够被访问的角色
      component: () => import('../views/home')
    }
    ...
    {
      path: '*'
      redirect: '/404'
    }
  ]
})

export default router

然后你可能会在登录成功后,可以从后台返回的数据中得到用户的权限,通过这个权限,控制显示的导航菜单.

比如从后台接受到的数据是这样的:

{
    code: 200,
    ...
    rows: [
        {
            userCode: AKJUFIANJ,
            ...
            roles: 'admin'
        }
    ]
}

然后把用户信息存储到vuex当中去,通过判断用户的角色,得到导航菜单.

或许你会这样做:

//  导航菜单
<ul>
  <router-link
    v-for="(item, index) in menu"
    :key="index"
    :to='item.url'>
    {
  {item.name}}
  </router-link>
</ul>


computed {
    menu () {
        let menuArray = []
        // 用户为消费者,返回商城等导航
        if (store.getter.roles === 'guest') {
            menuArray = [
                {
                    name: '商城',
                    url: '/shop'