vue角色不同动态分配路由权限,实现权限的控制

原创

已于 2022-08-12 17:04:21 修改 · 置顶 · 2.5w 阅读

于 2018-11-23 15:22:35 首次发布

本文介绍了基于Vue的角色权限控制实现方法。通过在用户登录后获取角色信息，并使用Vuex存储，结合`router.beforeEach`在进入每个路由前判断权限，动态加载符合角色的路由。在遇到页面刷新导致信息丢失的问题时，通过`beforeCreate`钩子解决。同时强调角色信息应为数组格式以匹配路由。

首先说一下大概的思路

router路由第一次只加载登录注册和404页面

当用户成功登录后,使用vuex设置用户的Token

如果Token存在,角色信息不存在,就去后台获取该用户的详细信息,包含但不限角色信息,将角色信息存在vuex中

如果Token存在,角色信息也存在,表明已经获取过了角色信息,直接进入系统

根据vuex中的角色信息去匹配router里面的符合要求路由,动态挂载

现在再看看具体实现的步骤,我会根据上面的思路一步一步进行

首先配置 router

export const constantRouterMap = [
  // mode: 'history', //后端支持可开
  { path: '/login', component: () => import('@/views/login'), hidden: true },
  { path: '/register', component: () => import('@/views/login/register'), hidden: true },
  { path: '/404', component: () => import('@/views/404'), hidden: true },]

export default new Router({
  mode: 'history',
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
})

这是仅包含登录注册和404页面的路由,当用户未登录的时候只能访问这三个路由

用户登录,首先vue页面的登录事件

 handleLogin() {
      var _this = this
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$store.dispatch('Login', this.loginForm).then(() => {
            _this.loading = false
            _this.$router.push({ path: this.redirect || '/' })
          }).catch(() => {
            _this.errorTip('账号或密码错误!')
            _this.loading = false
          })
        } else {
          return false
        }
      })
    },

登录的Action

actions: {
    // 登录
    Login({ commit }, userInfo) {
      const username = userInfo.username.trim()
      return new Promise((resolve, reject) => {
        login(

标签