Vue权限管理详解

一、Vue权限管理

Vue是一个轻量级MVVM框架，它的组件化和数据响应式特性使得它在前端开发中受到越来越多的关注。在很多前端项目中，权限管理是必不可少的，而Vue允许我们通过组件实现不同模块的权限管理。

首先，我们需要定义权限规则，包括哪些组件需要访问权限、访问权限的等级等。然后，我们可以通过用户登录凭证来根据其权限设置来进行视图的渲染和业务逻辑的控制。

下面是一个简单的Vue权限管理代码示例：

// 定义权限规则
const authRules = [
  { name: 'Home', auth: 'public' },
  { name: 'Dashboard', auth: 'admin' },
  { name: 'User', auth: 'user' }
];

// 渲染菜单

  

// 控制页面的访问权限
<script>
export default {
  computed: {
    userAuth() {
      return this.$store.state.userAuth;
    },
    routerAuth() {
      return authRules.filter(item => item.auth === this.userAuth);
    }
  }
};

const router = new VueRouter({
  routes: [
    { path: '/', component: Home, name: 'Home' },
    { path: '/dashboard', component: Dashboard, name: 'Dashboard' },
    { path: '/user', component: User, name: 'User' }
  ]
});

router.beforeEach((to, from, next) => {
  if (routerAuth.map(item => item.name.toLowerCase()).indexOf(to.params.page.toLowerCase()) > -1) {
    next();
  } else {
    next({ name: 'Home' });
  }
});
</script>

二、Vue登录权限控制

在Vue项目中，登录权限控制是很重要的一部分。我们需要在用户登录完成后，保存用户凭证信息，并且在每次请求时验证用户凭证。以下是一段Vue登录权限控制的代码示例：

// 登录页面

  

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    // 登录操作
    login() {
      const userInfo = {
        username: this.username,
        password: this.password
      };
      // 请求登录接口
      this.$axios.post('/api/user/login', userInfo).then(
        response => {
          if (response.data.code === 0) {
            // 将登录信息保存到Vuex中
            this.$store.commit('SET_AUTH', response.data.auth);
            // 跳转到用户主页
            this.$router.push({ name: 'User' });
          }
        }
      );
    }
  }
}
</script>

// Vuex中保存用户信息
const store = new Vuex.Store({
  state: {
    userAuth: ''
  },
  mutations: {
    SET_AUTH(state, auth) {
      state.userAuth = auth;
    }
  }
});

// 请求拦截器，添加请求头信息
axios.interceptors.request.use(config => {
  const userAuth = store.state.userAuth;
  if (userAuth) {
    config.headers.Authorization = `Bearer ${userAuth}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器，处理请求错误信息
axios.interceptors.response.use(response => {
  const data = response.data;
  if (data.code !== 0) {
    alert(data.message);
  }
  return response;
}, error => {
  if (error.response) {
    switch (error.response.status) {
      case 401:
        alert('登录凭证已失效，请重新登录');
        // 删除登录信息和用户信息
        store.commit('SET_AUTH', '');
        // 跳转到登录页面
        router.push({ name: 'Login' });
        break;
      case 404:
        alert('请求地址不存在，请检查请求');
        break;
      case 500:
        alert('服务器错误，请联系管理员');
        break;
    }
  } else {
    console.log('请求异常，请检查网络');
  }
  return Promise.reject(error);
});

三、Vue权限框架

当权限规则比较复杂时，可以使用已有的Vue权限框架进行权限管理。例如，Vuelify就是一个基于Vue的UI框架，它提供了完整的权限控制方案，包括路由权限、按钮权限等。以下是一个使用Vuelify实现的权限管理的代码示例：

// 安装vuelify权限控制组件
npm install @vuelify/v-auth -S

// 在main.js中配置Vuelify
import Vue from 'vue';
import Vuelify from '@vuelify/v-auth';
import router from './router';

Vue.use(Vuelify, {
  router,
  rules: [
    {
      from: 'Dashboard',
      to: '/',
      rights: 'admin',
      redirect: '/403'
    }
  ]
});

// 在路由中使用Vuelify实现权限控制
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import Dashboard from './views/Dashboard.vue';
import User from './views/User.vue';
import Forbidden from './views/Forbidden.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/dashboard', component: Dashboard, meta: { rules: [{ rights: 'admin' }] } },
  { path: '/user', component: User, meta: { rules: [{ rights: 'user' }] } },
  { path: '/403', component: Forbidden }
];

const router = new VueRouter({
  routes
});

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.rules)) {
    const rules = to.meta.rules;
    if (rules.every(rule => Vuelify.check(rule))) {
      next();
    } else {
      const redirect = rules.find(rule => rule.redirect);
      if (redirect) {
        next({ path: redirect.redirect });
      } else {
        next({ path: '/403' });
      }
    }
  } else {
    next();
  }
});

四、Vue权限管理按钮显示隐藏

在一些需要权限控制的页面中，我们需要根据用户权限来控制某些按钮显示或者隐藏。以下是一个使用Vue来实现按钮的显示和隐藏的代码示例：

// 定义按钮的权限控制
const buttonAuth = {
  add: ['admin', 'user'],
  edit: ['admin'],
  delete: ['admin']
};

// 通过v-if指令实现按钮的显示和隐藏
新增
编辑
删除

五、Vue权限分配

在有些项目中，需要权限管理员根据角色来分配用户的权限。以下是一个使用Vue实现权限分配的代码示例：

// 角色列表
const roles = [
  { name: '管理员', auth: 'admin' },
  { name: '普通用户', auth: 'user' }
];

// 用户列表
const users = [
  { name: '张三', role: '管理员' },
  { name: '李四', role: '普通用户' }
];

// 分配权限方法
function assignAuth(username, role) {
  users.forEach(user => {
    if (user.name === username) {
      user.role = role;
    }
  });
}

// 模板中使用Vue来实现权限分配

  

<script>
export default {
  data() {
    return {
      roles: roles,
      users: users,
      selectedUser: '',
      selectedRole: ''
    };
  },
  methods: {
    // 分配权限操作
    assign() {
      assignAuth(this.selectedUser, this.selectedRole);
    }
  }
};
</script>

六、Vue权限管理框架

在实际项目中，我们可能需要进行更复杂的权限管理。这时候，我们可以考虑使用一些优秀的Vue权限管理框架，例如，Vue-Access-Control (VAC)。以下是一个使用VAC实现权限管理的代码示例：

// 安装Vue-Access-Control
npm install vue-access-control --save

// 创建权限管理组件

  

<script>
import { AccessControl, Access } from 'vue-access-control';
import Nav from './Nav.vue';

export default {
  name: 'App',
  components: { Nav },
  data() {
    return {
      accessControl: new AccessControl(),
      role: ''
    };
  },
  created() {
    // 初始化权限控制
    this.accessControl.setRoles(['admin', 'user']);
    this.role = 'user';
  },
  methods: {
    // 切换角色
    switchRole(role) {
      this.accessControl.setUser(new Access(role));
      this.role = role;
    }
  }
};
</script>

// Nav组件中的切换角色操作

  

<script>
export default {
  methods: {
    switchRole(role) {
      this.$emit('switch-role', role);
    }
  }
}
</script>

七、Vue权限分配功能

在Vue项目中，我们可能需要实现权限分配功能，以允许管理员将权限分配给其他用户或角色。以下是一个使用Vue实现权限分配功能的代码示例：

// 角色列表
const roles = [
  { name: '管理员', auth: 'admin' },
  { name: '普通用户', auth: 'user' }
];

// 用户列表
const users = [
  { name: '张三', role: '管理员' },
  { name: '李四', role: '普通用户' }
];

// 分配权限方法
function assignAuth(username, role) {
  users.forEach(user => {
    if (user.name === username) {
      user.role = role;
    }
  });
}

// 模板中使用Vue来实现权限分配功能