vue-router动态路由实现前端权限管理方式

 更新时间:2023年10月21日 10:26:07   作者:風灬雲  
这篇文章主要介绍了vue-router动态路由实现前端权限管理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue-router动态路由实现前端权限管理

抱着试试水的心态出去面试了两家公司;

其中一家公司面试的时候多次问到了vue-router的动态路由实现权限管理的问题;

回来后我就仔细研究了一下

router.addRoutes

动态路由是基于vue-router 新增的router.addRoutes方法来实现的;

也就是为了达到当用户登录之后通过判断用的权限来觉得前端哪些页面能展示,哪些不能展示;

第一步

创建vue-router

router/index.js内容

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import demo from '@/components/role'
import  notFind from '@/components/404'
Vue.use(Router);
//不需要权限的路由
export const constantRouterMap = [
  {
    path: '/',
    component: HelloWorld,
    name: '首页'
  }, {
    path : '/404',
   component:notFind,
    meta : {
      title : '404未找到',
    }
  }
]
//实例化vue的时候只挂载constantRouter
export default new Router({
  routes: constantRouterMap
});

//异步挂载的路由
//动态需要根据权限加载的路由表
export const asyncRouterMap = [
  {
    path: '/role',
    component: demo,
    name: '权限测试',
    meta: { role: ['admin','super_editor'] }, //页面需要的权限
  },{
    path : '*',
    redirect : '/404'
  }
];

第二步

在入口函数中判断用户权限并添加路由

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import { asyncRouterMap, constantRouterMap } from './router';
import Vuex from "Vuex"
import VueDND from 'awe-dnd'
import BaiduMap from 'vue-baidu-map'
Vue.use(Vuex)
function hasPermission(roles, route) {
  if (route.meta && route.meta.role) {
    console.log(roles);
    return roles.some(role => route.meta.role.indexOf(role) >= 0)
  } else {
    return true
  }
}
const store = new Vuex.Store({
  state: {
    count: 0,
    token:"asdsd",
    roles:"",
    routers:[],
    addRouters:[]
  },
  getters:{
    token(){
      return "asdsd"
    },
    roles(state ){
      return state.roles
    },
    addRouters(state){
      return state.addRouters
    },
    routers(state){
      return state.routers
    }
  },
  actions:{
    GetInfo({state}){
      return {
        data:{
          role:state.roles=["admin"]
        }
      }
    },
    GenerateRoutes({ commit }, data){
      return new Promise(resolve => {
        const { roles } = data;
        console.log(asyncRouterMap,roles);
        const accessedRouters = asyncRouterMap.filter(v => {
          if (roles.indexOf('admin') >= 0) return true;
          if (hasPermission(roles, v)) {
            if (v.children && v.children.length > 0) {
              v.children = v.children.filter(child => {
                if (hasPermission(roles, child)) {
                  return child
                }
                return false;
              });
              return v
            } else {
              return v
            }
          }
          return false;
        });
        console.log(accessedRouters);
        commit('SET_ROUTERS', accessedRouters);
        resolve();
      })
    }
  },
  mutations: {
    SET_ROUTERS: (state, routers) => {
      console.log(routers);
      state.addRouters = routers;
      state.routers = constantRouterMap.concat(routers);
    }
  }
});
router.beforeEach((to, from, next) => {
  if (store.getters.token) { // 判断是否有token
    if (to.path === '/login') {
      next({ path: '/' });
    } else {
      if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetInfo').then(res => { // 拉取info
          const roles = res.data.role;
          store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
            console.log(store.getters.addRouters);
            router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
          })
        }).catch(err => {
          console.log(err);
        });
      } else {
        next() //当有用户权限的时候,说明所有可访问路由已生成 如访问没权限的全面会自动进入404页面
      }
    }
  } else {
    next('/login'); // 否则全部重定向到登录页
  }
});

这样的话,就算用户权限不够,也不会看到那些页面的静态资源;而是直接显示自己编辑的404页面

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue生成token并保存到本地存储中

    vue生成token并保存到本地存储中

    这篇文章主要介绍了vue生成token并保存到本地存储中,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • vue实现登录滑动拼图验证

    vue实现登录滑动拼图验证

    这篇文章主要为大家详细介绍了vue实现登录滑动拼图验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue项目中使用qrcodesjs2生成二维码简单示例

    vue项目中使用qrcodesjs2生成二维码简单示例

    最近项目中需生成二维码,发现了很好用的插件qrcodesjs2,所以下面这篇文章主要给大家介绍了关于vue项目中使用qrcodesjs2生成二维码的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • vue更新数据却不渲染页面的解决

    vue更新数据却不渲染页面的解决

    这篇文章主要介绍了vue更新数据却不渲染页面的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue项目强制清除页面缓存的例子

    vue项目强制清除页面缓存的例子

    今天小编就为大家分享一篇vue项目强制清除页面缓存的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue2和elementUI 实现落日余晖登录页和滑块校验功能

    vue2和elementUI 实现落日余晖登录页和滑块校验功能

    这篇文章主要介绍了vue2和elementUI打造落日余晖登录页和滑块校验,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • vue中利用pinyin-pro纯前端实现拼音的模糊搜索功能

    vue中利用pinyin-pro纯前端实现拼音的模糊搜索功能

    这篇文章主要介绍了vue中利用pinyin-pro纯前端实现拼音的模糊搜索,实现思路很简单,通过安装配置插件编写工具类,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 浅谈vite和webpack的性能优化和区别

    浅谈vite和webpack的性能优化和区别

    本文主要介绍了浅谈vite和webpack的区别,从性能优化的几个方便讲解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • Vue 项目中遇到的跨域问题及解决方法(后台php)

    Vue 项目中遇到的跨域问题及解决方法(后台php)

    这篇文章主要介绍了Vue 项目中遇到的跨域问题及解决方法(后台php),前端采用vue框架,后台php,具体解决方法,大家参考下本文
    2018-03-03
  • vue3+Typescript实现路由标签页和面包屑功能

    vue3+Typescript实现路由标签页和面包屑功能

    在使用 Vue.js 开发后台管理系统时,经常会遇到需要使用路由标签页的场景,这篇文章主要介绍了vue3+Typescript实现路由标签页和面包屑,需要的朋友可以参考下
    2023-05-05

最新评论