Vue动态权限登录实现(基于路由与角色)

const routes = [
  {
    path: '/admin',
    name: 'admin',
    component: Admin,
    meta: {
      roles: ['admin']
    }
  },
  {
    path: '/user',
    name: 'user',
    component: User,
    meta: {
      roles: ['admin', 'user']
    }
  }
]

router.beforeEach((to, from, next) => {
  const roles = to.meta.roles
  const role = getUserRole() // 获取用户角色信息
  if (roles && roles.indexOf(role) === -1) {
    // 用户没有该路由需要的角色，禁止访问
    next('/403')
  } else {
    // 用户具有该路由需要的角色，可以访问
    next()
  }
})

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    token: '',
    roles: []
  },
  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
    SET_ROLES: (state, roles) => {
      state.roles = roles
    }
  },
  getters: {
    getUserRole: state => {
      return state.roles[0] || ''
    }
  }
})
export default store

npm install vue-router vuex axios -S

<!-- Login.vue -->
<template>
  <div>
    <h1>用户登录</h1>
    <form>
      <label>用户名：<input v-model="username"></label>
      <label>密码：<input type="password" v-model="password"></label>
      <button type="submit" @click.prevent="login">登录</button>
    </form>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      axios.post('/api/login', {
        username: this.username,
        password: this.password
      }).then(response => {
        const { token, roles } = response.data
        this.$store.commit('SET_TOKEN', token)
        this.$store.commit('SET_ROLES', roles)
        this.$router.push('/')
      }).catch(error => {
        console.error(error)
      })
    }
  }
}
</script>
<!-- Admin.vue -->
<template>
  <div>
    <h1>管理员页面</h1>
    <p v-if="isUserAdmin">您是管理员，可以访问这个页面</p>
    <p v-else>您不是管理员，无法访问这个页面</p>
  </div>
</template>
<script>
export default {
  computed: {
    isUserAdmin () {
      return this.$store.getters.getUserRole === 'admin'
    }
  }
}
</script>

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')