精华内容
下载资源
问答
  • 一般用于后台管理系统,登陆成功后台返回...设定角色:例如超级管理员,普通用户,给角色配置菜单权限,将菜单列表以树状图结构返回,利用element的tree组件展示,勾选上哪个菜单就表示有权限进入这个页面 菜单管理(menu...

    一般用于后台管理系统,登陆成功后台返回可用路由,将router的路由进行匹配,对用户进行限制
    分3个板块

    1. 账号管理(account)
      给账号绑定角色(多选),一个账号可绑定多个角色
      在这里插入图片描述

    2. 角色管理(role)
      设定角色:例如超级管理员,普通用户,给角色配置菜单权限,将菜单列表以树状图结构返回,利用element的tree组件展示,勾选上哪个菜单就表示有权限进入这个页面
      在这里插入图片描述

    3. 菜单管理(menu)
      菜单列表添加你后台管理系统router配置的每个path名称,
      在这里插入图片描述
      登录后根据返回的权限路由(menus)与router配置递归比较修改meta.show=true(自定义)这样就可以控制导航菜单显示,将返回的menus储存,在路由拦截调取,并判断当前要跳转的路由是否在权限内,否则不跳转并提示
      在login.vue中
      登录成功后后台返回路由信息
      在这里插入图片描述

    import routes from '../router/routes'
    export default {
    data() {
            return {
                form: {
                    password: '',
                    account: ''
                },
                routerArr: []
            }
        },
    methods: {
            login() {
                if (this.form.account == '') {
                    this.$message.error('请输入账号')
                    return false
                }
                if (this.form.password == '') {
                    this.$message.error('请输入密码')
                    return false
                }
                this.$api.login(this.form).then((data) => {
                    if (data.code == 200) {
                        let menus = data.data.menus
                        localStorage.setItem('menu', JSON.stringify(menus))
                        let arr = []
                        for (let i in menus) {
                            arr.push(menus[i].path)
                        }
                        arr = arr.join(',')
                        localStorage.setItem('menusRouter', arr)
                        localStorage.setItem('accessToken', data.data.accessToken)
                        this.mapRoot(menus, routes[1].children)
                    }
                })
            },
            mapRoot(arr, routerArr) {
                for (let i in routerArr) {
                    for (let j in arr) {
                        if (
                            routerArr[i].path == arr[j].path &&
                            routerArr[i].path != ''
                        ) {
                            if (routerArr[i].meta.isMenu != undefined) {
                                routerArr[i].meta.isMenu = true
                            }
                            break
                        }
                    }
                    if (routerArr[i].children && routerArr[i].children.length > 0) {
                        this.mapRoot(arr, routerArr[i].children)
                    }
                }
                this.$router.push({ path: '/main' })
            }
        }
      }
    

    这是我router.js配置部分代码

    {
                    path: 'groupQuesList',
                    name: 'groupQuesList',
                    component: () => import('@/views/topic/groupQuesList.vue'),
                    meta: {
                        isMenu: false,//true为显示在导航,默认全是false
                        icon: 'el-icon-edit-outline',
                        title: '组试题'
                    }
                },
                {
                    path: 'groupBangTi',
                    name: 'groupBangTi',
                    component: () => import('@/views/topic/groupBangTi.vue'),
                    meta: {
                        title: '组-绑定试题' //不显示在导航的页面不要设置isMenu
                    }
                }
    

    如有写的不明白的地方请在下方留言

    展开全文
  • vue根据用户权限配置动态路由

    千次阅读 2019-06-05 17:01:41
    首先让我们了解一下前端路由路由router全部配置在前端,根据用户权限判断可以进入哪些页面 缺点: vue初始化的时候需要挂载全部路由,对性能有影响 安全性低,用户可以在地址栏跳转到无权访问的页面(可优化) ...

    首先让我们了解一下前端路由:路由router全部配置在前端,根据用户权限判断可以进入哪些页面
    缺点:

    • vue初始化的时候需要挂载全部路由,对性能有影响
    • 安全性低,用户可以在地址栏跳转到无权访问的页面(可优化)

    动态路由则是根据用户信息获取权限,简单来说就是根据用户信息获取其对应的权限,生成对应的路由挂载,然后动态渲染有权限的菜单于侧边栏

    实现
    • 定义静态路由(登录或者公用页面)、动态路由,vue初始化时只挂载静态路由
    • 用户登录后,拿到用户token,调接口拿到动态路由权限DynamicRoutes,将DynamicRoutes和定义的动态路由比较,筛选出相应的用户可访问路由表
    • 执行router.addRoutes(DynamicRoutes)添加动态路由
    • 使用vuex存储路由表,根据vuex中可访问的路由渲染侧边栏sidebar
    // beforeEach中
    if (getToken() && getToken() !== 'undefined') {
      // 权限判断
      if (!store.state.app.menuPermissions) {
        /* 获取后台给的权限数组 */
        return new Promise((resolve, reject) => {
          getPermissionList().then(response => {
            if (response.data.stat === 1) {
              const userRouter = response.data.data
              // 检查并生成新的路由表
              const DynamicRoutes = ChecAndSetPermissionRouter(userRouter)
              // 默认使/重定向到第一个有效的路由
              for (let i = 0, leni = DynamicRoutes.length; i < leni; i++) {
                if (DynamicRoutes[i].children.length > 0) {
                  DynamicRoutes[i].path = '/'
                  DynamicRoutes[i].redirect = DynamicRoutes[i].children[0].path
                  break
                }
              }
              DynamicRoutes.push({ path: '*', redirect: '/404', hidden: true }) // 全局404
              /* 生成左侧导航菜单 */
              store.dispatch('SetMenuPermissions', DynamicRoutes)
    
              /*  动态添加路由 */
              router.addRoutes(DynamicRoutes)
    
              // /* 完整的路由表 */
              store.dispatch('SetRouterPemissions', [...constantRouterMap, ...DynamicRoutes])
              next(to)
            }
          }).catch(error => {
            router.push('/404')
            // /* 生成左侧导航菜单 */
            store.dispatch('SetMenuPermissions', [])
            next()
            reject(error)
          })
        })
      }
      if (to.path === '/login') {
        next({ path: '/' })
      } else {
        next()
      }
    } else {
      if (whiteList.indexOf(to.path) !== -1) {
        next()
      } else {
        next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
      }
    }
    

    这里因为后台返回的不是标准的路由,所以只能根据后台返回的权限数据中的菜单名字或者其他唯一性字段到默认定义的动态路由中筛选出有权限的路由组成路由表,这里的ChecAndSetPermissionRouter方法就是干这个的(ChecAndSetPermissionRouter方法比较多,放末尾参考)

    退出登录
    • 置menuPermissions为null,这样下次登录之后就会重新调用权限接口获取新的权限,否则另一个用户登录之后还是上一个用户的权限路由
    • 重置路由,否则下次addRoutes会提示路由定义重复
    this.$store.dispatch('FedLogOut').then(() => {
        this.$store.dispatch('SetMenuPermissions', null)
        // 重置路由,以防再次进入时提示路由重复
        const createRouter = () => new Router({
          mode: 'hash',
          routes: constantRouterMap
        })
        const newRouter = createRouter()
        // resetRouter()
        this.$router.matcher = newRouter.matcher
    
        this.$router.push('/login')
        // 清除水印
        Watermark.clear()
      })
    }
    

    踩坑来了
    在这里插入图片描述

    Q:为什么404 页面一定要最后加载,放置在静态路由中会怎么样?
    放在静态路由里,后面的所以页面都会被拦截到404,所以应该获取动态路由权限之后push
    Q:权限获取成功,不跳转新生成的动态路由,跳404?
    beforeEach中router.addRoutes之后的next()可能会失效,因为可能next()的时候路由并没有完全add完成,可替换成next(to),重新进入router.beforeEach这个钩子,这时候再通过next()来释放钩子,就能确保所有的路由都已经挂在完成了。
    Q:$router.addRoutes()动态添加的路由怎么删除掉?
    在开发中,有新增编辑删除菜单并要求左侧边栏菜单及时更新的需求,如果直接addRoutes,warn如下:

    解决:addRoutes之前要清除掉上次addRoutes的路由,所以操作菜单调取最新权限后重新初始化router,进行matcher赋值

    // DynamicRoutes是最新权限路由
    const createRouter = () => new Router({
      mode: 'hash',
      routes: []
    })
    const newRouter = createRouter()
    // resetRouter()
    this.$router.matcher = newRouter.matcher
    this.$router.addRoutes(DynamicRoutes)
    

    Q:莫名其妙的无限循环
    vue-admin-template,遇到二级菜单children为空的权限,报错如下:
    解决:按照github-issues上方法,在SidebarItem.vue里改一下data就好了(没想通为啥)

    // 更改后如下,return {}
    data() {
        this.onlyOneChild = null
        return {}
    }
    

    附:ChecAndSetPermissionRouter

    import { dynamicRouterMap } from '@/router'
    
    export function ChecAndSetPermissionRouter(permissionDatas) {
      // 获取到权限hashmap
      var permissionHashMap = null
      permissionHashMap = GetPermissionHashMap(permissionDatas)
      // 标记路由表
      var newDynamicRouterMap = []
      newDynamicRouterMap = objDeepCopy(dynamicRouterMap)
      newDynamicRouterMap.forEach(item => {
        MarkRouter(null, item, permissionHashMap)
      })
      // 重设路由表
      for (let i = 0; i < newDynamicRouterMap.length; i++) {
        if (ResetRouter(newDynamicRouterMap, newDynamicRouterMap[i])) {
          i-- // 注意:防止移除后索引错位
        }
      }
      return newDynamicRouterMap
    }
    function GetPermissionHashMap(permissionDatas) {
      var permissionHashMap = {}
      permissionDatas.forEach(item => {
        SetKeyValueOfNodes(null, item, permissionHashMap)
      })
      return Object.assign({}, permissionHashMap)
    }
    
    // 深拷贝,递归重新设置前端路由表,避免数据复用
    function objDeepCopy(source) {
      var sourceCopy = source instanceof Array ? [] : {}
      for (var item in source) {
        sourceCopy[item] = typeof source[item] === 'object' ? objDeepCopy(source[item]) : source[item]
      }
      return sourceCopy
    }
    
    // 为权限hashmap的属性赋值,新增属性tempKey/tempKey2
    function SetKeyValueOfNodes(p, c, permissionHashMap) {
      // 需要匹配的组合类型
      var tempKey = (p ? p.name : 0) + '_' + c.name
      var tempKey2 = c.name + '_' + c.name
      // 赋值
      permissionHashMap[tempKey] = 1
      permissionHashMap[tempKey2] = 1
      // 递归遍历子节点赋值
      if (c.children != null && c.children.length > 0) {
        c.children.forEach(item => {
          SetKeyValueOfNodes(c, item, permissionHashMap)
        })
      }
    }
    
    // 标记路由表
    function MarkRouter(p, c, permissionHashMap) {
      var key = (p ? p.meta.title : 0) + '_' + c.meta.title
      // 使用拼接的key作为参考标记去匹配有权限的路由表
      if (HasPermission(key, permissionHashMap)) {
        if (p != null) {
          p.keep = true // 保留当前节点
        }
        if (c != null) {
          c.keep = true
        }
      }
      if (c.children && c.children.length > 0) {
        c.children.forEach(item => {
          MarkRouter(c, item, permissionHashMap)
        })
      }
    }
    
    // 校验后端接口是否存在当前节点
    function HasPermission(key, permissionHashMap) {
      return permissionHashMap[key] === 1
    }
    
    // 重置路由表
    function ResetRouter(p, c) {
      if (c == null) {
        return false
      }
      if (p.children && !c.keep) {
        p.children.splice(p.children.indexOf(c), 1)
        return true
      } else if (!c.keep) {
        p.splice(p.indexOf(c), 1)
        return true
      }
      if (c.children && c.children.length > 0) {
        for (let i = 0; i < c.children.length; i++) {
          if (ResetRouter(c, c.children[i])) {
            i-- // 注意:防止移除后索引错位
          }
        }
      }
      return false
    }
    
    展开全文
  • 因为后台管理系统是准备使用vue+vue-router+element-ui+vuex的搭配来做的,可是单页应用在进入页面之前就已经将vue-router实例化并且注入vue实例中了,所以在进入登录页面的时候旧没办法在重新定制路由了。...
  • 用户登录后返回权限菜单,前端根据权限菜单动态添加路由,然后再动态生成菜单栏。 思路如下: 一、定义初始化默认路由。 二、动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回的菜单...
  • 主要介绍了Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制的相关知识,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 笔者这篇文章主要讲解其中的动态路由,如果你是一位前端工程师,我想你会渴望知道其中的代码是如何实现的,如果你是后端工程师,希望我下面的代码不是那么晦涩难懂。另外我很欣赏你爱学习的精神。话不多说下面就是...

    一、背景

    现在很多公司的vue项目都是一套模板加平台配置系统。角色权限、菜单名称、菜单图标都可以在平台配置系统上傻瓜式配置。笔者这篇文章主要讲解其中的动态路由,如果你是一位前端工程师,我想你会渴望知道其中的代码是如何实现的,如果你是后端工程师,希望我下面的代码不是那么晦涩难懂。另外我很欣赏你爱学习的精神。话不多说下面就是干货了~

    二、代码实现

    为了更方便的学习,笔者模拟了后端的接口数据,你可以复制粘贴直接使用~

    export const dynamicRouters = [
      {
        path: '/home', //注意不要重复,唯一!!
        name: 'home', //注意不要重复,唯一!!
        mate: {
          title: '首页',    //这个是菜单项名字
          icon: 'el-icon-s-home', //图标class 可以先不管
        },
        component: "/home/home", 这个是组件路径,正常来说是'@component/home/home'
       }
    ]

    好了拿到数据之后,我们需要在用户登陆成功后动态加入,这里为了方便,不管他是什么角色有什么权限,我都返回上面的路由,如果在业务场景中,你可以让后台根据不同角色返回不同的路由,从而实现权限控制。下面再src下新建一个permission.js文件放入如下代码

    import router from './router'        //默认路由文件,可以放不用权限配置的页面
    import store from './store/store'    // vuex 一般路由数据都存在这里面,为了全局的数据绑定。
    import { dynamicRouters } from "./components/mock.js"  //这里就是后台返回的数据你懂的~
    
    router.beforeEach((to, from, next) => {
      if (sessionStorage.getItem('token')) {    //判断用户是否已经登陆
        if (to.path === '/' && sessionStorage.getItem('token')) {
          next({ path: '/home' })
        } else {
          if (store.getters.menuRouter.length === 0) {    //这里判断下vuex中是否有了动态路由数据
            store.dispatch('SET_MENU_ROUTER', dynamicRouters).then(() => { //这里对后台数据做处理
              router.addRoutes(store.getters.menuRouter)    //关键看这里 取出后台数据,把数据从这加入
              next({ path: to.path === '/home' ? '/home' : to.path })
            })
          } else {
            next();
          }
        }
      } else {
        next();
      }
    })

    注意还没完,上面我们执行store.dispath('SET_MENU_ROUTER',dynamicRouters)方法对数据进行了处理,你也需要,代码如下

    //这里是vuex的内容,我默认你是会的~~
    const importRouter = (url) => {
      return () => import('@/components' + url)    //这里把真实路径补正确
    }
    
    function filterAsyncRouter(asyncRouterMap) {    //递归处理路由懒加载
      const accessedRouters = asyncRouterMap.filter(route => {
        route.component = importRouter(route.component)
        if (route.children && route.children.length) {
          route.children = filterAsyncRouter(route.children)
        }
        return true
      })
    
      return accessedRouters
    }
    const state = {
      menuRouter: [],        // 存储路由
    }
    const getters = {
      menuRouter: (state) => {
        return state.menuRouter    //返回给addRouter使用
      },
    }
    const mutations = {
      setMenuRouter(state, menuRouter) {
        state.menuRouter = menuRouter    // 设置存储
      },
    }
    const actions = {
      SET_MENU_ROUTER({ commit }, menuRouter) {
        return new Promise(resolve => {
          const accessedRouters = filterAsyncRouter(menuRouter) //调用
          // console.log(accessedRouters);
          commit('setMenuRouter', accessedRouters)    //调用mutations中的方法,你懂的~
          resolve()    //回调实现
        })
      },
    }

    搞定!

    展开全文
  • 利用 vue-router 的 addRoutes 方法可以动态添加路由。 先看一下官方介绍: router.addRoutes router.addRoutes(routes: Array) 动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。 举个例子: ...
  • 很多时候我们在项目的路由都是在前端配置好的 但是有的时候为了进行全面的权限控制,会需要后台给出路由表,前端再渲染。不用在前端配置。 下面主要讲一下思路 1、和后台小哥哥沟通好数据,把我们前端配置的路由表...
  • *相关补充:权限管理一般放到项目的最后时间来做,最开始路由配置信息前端都是写死,做权限管理的时候,需要将路由配置发给后端,让后端判断该显示哪些菜单,再返回给前端,不能前端判断,考虑到后端接口返回的值是...

    一、首先在main.js做路由守卫,不能先跳转路由页面,在页面中向后端获取路由配置文件

    *相关补充:权限管理一般放到项目的最后时间来做,最开始路由配置信息前端都是写死,做权限管理的时候,需要将路由配置发给后端,让后端判断该显示哪些菜单,再返回给前端,不能前端判断,考虑到后端接口返回的值是可以被拦截修改的。*

    main.js添加如下代码:

    import store from "./store";
    /**动态路由 */
    const whiteList = ['Login', 'Index'];//默认可以跳转的路由。
    let asyncRouterFlag = 0;
    router.beforeEach(async(to, from, next) => {
        const token = localStorage.getItem('admin_systemToken');
        document.title = to.meta.title;  //设置标题
        if (whiteList.indexOf(to.name) > -1) {  //查询是否是默认可以跳转的路由
            if (to.path == '/login') {  //如果是去登录页面直接进入
                next();
            } else {
                if (!token) {   //没有登录,进入登录页
                    next('/login');
                } else {
                    next();
                }
            }
        }else{  //判断是否满足权限
            if(token){
                // 添加flag防止多次获取动态路由和栈溢出
                if (!asyncRouterFlag) {
                    asyncRouterFlag++;
                    //同步调用获取菜单方法
                    await store.dispatch('router/SetAsyncRouter')   //发请求获取菜单,并将菜单设置到vuex中,
                    const asyncRouters = store.getters['router/asyncRouters'];
                    //循环后动态添加路由,addRoutes方法好像不能用了
                    asyncRouters.map(asyncRouter => {
                        router.addRoute(asyncRouter)      
                    })
                    next({ ...to, replace: true })
                } else {
                    next()
                }
            }else{
                next({
                    path: '/login',
                    // query: {
                    //     redirect: document.location.hash
                    // }
                })
            }
        }
    })

    二、获取路由配置文件。路由配置文件基本上跟后台的菜单结构都差不多,所以获取了路由配置文件的时候,就不需要再获取菜单了。那么路由配置文件最好是写在vuex中

    1.新建一个vuex模块,并使用。

    store/index.js:

    import Vue from 'vue'
    import Vuex from 'vuex'
    import router from './router/index.js'
    Vue.use(Vuex)
    
    
    export default new Vuex.Store({
        state: {
    
        },
        mutations: {
    
        },
        actions: {},
        modules: {
            router
        }
    })

    2.路由配置文件相关处理。

    store/router/index.js:

    
    export default {
        namespaced: true,
        state: {
            //动态路由配置
            asyncRouters:[]
        },
        mutations: {
            // 设置动态路由
            setAsyncRouter(state, asyncRouters) {
                state.asyncRouters = asyncRouters
            }
        },
        actions: {
            //获取菜单
            async SetAsyncRouter({ commit }) {
                //获取菜单的路由配置,并配置
                var list=[
                {
                    path: "#",
                    component: () =>import("@/views/layout/index.vue"),
                    meta: {
                        icon: 'el-icon-message'
                    },
                    children: [{
                        path: "/userManage/userList",
                        name: "userManageUserList",
                        component: (resolve) => require(['@/views/userManage/userList/index.vue'], resolve),
                        meta: {
                            title: "用户列表",
                            icon: 'el-icon-position'
                        }
                    }]
                },
                {
                    path: "#",
                    component: () =>import("@/views/layout/index.vue"),
                    meta: {
                        icon: 'el-icon-message'
                    },
                    children: [{
                        path: "/systemConfig/adminUser",
                        name: "systemConfigAdminUser",
                        component: (resolve) => require(['@/views/systemConfig/adminUser/index.vue'], resolve),
                        meta: {
                            title: "后台用户",
                            icon: 'el-icon-position'
                        }
                    }]
                },
                {
                    path: "#",
                    component: () =>import("@/views/layout/index.vue"),
                    meta: {
                        icon: 'el-icon-message'
                    },
                    children: [{
                        path: "/systemConfig/roleManage",
                        name: "systemConfigRoleManage",
                        component: (resolve) => require(['@/views/systemConfig/roleManage/index.vue'], resolve),
                        meta: {
                            title: "角色管理",
                            icon: 'el-icon-position'
                        }
                    }]
                },
                {
                    path: "#",
                    component: () =>import("@/views/layout/index.vue"),
                    meta: {
                        icon: 'el-icon-message'
                    },
                    children: [{
                        path: "/systemConfig/otherConfig",
                        name: "systemConfigOtherConfig",
                        component: (resolve) => require(['@/views/systemConfig/otherConfig/index.vue'], resolve),
                        meta: {
                            title: "其他参数配置",
                            icon: 'el-icon-position'
                        }
                    }]
                }];
                //添加404页面,这个只能在路由最后添加。
                list.push({
                    path: '/404',
                    name: '404',
                    hidden: true,
                    meta: {
                        title: '迷路了*。*',
                    },
                    component: () =>import("@/views/error/index.vue"),
                },{
                    path: "*",
                    redirect: "/404"
                },);
                commit('setAsyncRouter',list);
            }
        },
        getters: {
            //获取动态路由
            asyncRouters(state) {
                return state.asyncRouters
            },
      }
    }

    说明:list的数据等于后端返回给前端的数据,大家使用的时候需要调后端api获取,我这里直接写死,考虑到这里还会有一些判断,为了让大家更清楚看懂。

    注意:

    1.404页面必须放到最后添加,不然会出现奇怪的问题。

    2.main.js文件使用了router.beforeEach,其他任何文件就不能再使用了,不能会进行双重判断,出现一些异常问题。

    三、静态路由配置文件(参考)。

    const routes = [{
            path: "/",
            redirect: '/index'
        },
        {
            path: "/login",
            name: "Login",
            // component: (resolve) => require(['@/views/login/index.vue'], resolve),
            component: () =>import("@/views/login/index.vue"),
            meta: {
                title: "登录"
            }
        },
        {
            path: "/index",
            component: Layout,
            children: [{
                path: "/index",
                name: "Index",
                component: (resolve) => require(['@/views/index/Index.vue'], resolve),
                meta: {
                    title: "首页",
                    icon: 'el-icon-s-home'
                }
            }]
        },
    ];

    四、登录后需要干什么(参考)。

    登录后,代码:

            //登录
            login({username,password}){
                let res = this.$api.login({
                    account:username,
                    password:password
                }).then(res=>{
                    if (res.code === 200) {
                        this.$message({type: 'success',message: res.msg});
                        localStorage.setItem('admin_systemToken', res.data.api_key);
                        this.$router.push('/');
                    } else {
                        this.$message({type: 'error',message: res.msg});
                    }
                }).catch(err=>{
                    console.log(err);
                });
            }

    存储自己的token。

    五、token过期,退出登录切换账号我们需要清除已经注册的路由,防止其他用户获得到已经注册好了的路由。

    1.退出登录,跳转登录页面,并进行一次刷新操作:

    router.replace({path: '/login'});
        window.location.reload();

    token过期时的请求拦截,如何刷新?

    2.考虑到请求有可能是多个,就有可能造成多个无限刷新操作,这里需要判断一下当前页面是否在登录页面。

    代码:注意:我的判断代码还没有写哈,根据自己的情况来判断重复跳转,重复刷新。

    service.interceptors.response.use((res) => {
      console.log(res, '我是拦截')
      // if(res.)
      nprogress.done()
      return res.data
    }, err => {
      let status = err.response.status
      if (err.response && err.response.status) {
        console.log(err.response)
        if (status == 401) {
          Message.error('登录失效,请刷新后重试')
          router.replace({path: '/login'});
            window.location.reload();
        }
      }
      return Promise.reject(err.response)
    })

    3.注意检查登录页面是否有请求会出现token过期的状态码,如果有,跟后端沟通给其他的状态码,防止登录页无限刷新。

    展开全文
  • vue动态路由权限管理

    千次阅读 2020-09-22 15:42:59
    (2)、复杂的路由权限设置:比如OA系统、多种角色的权限配置。通常需要后端返回路由列表,前端渲染使用 1、简单的角色路由设置 (1)配置项目路由权限 // router.js import Vue from 'vue' import Router f
  • Vue 动态路由权限菜单的实现思路

    千次阅读 2019-07-09 16:53:59
    为什么不贴代码详细说而是只讲思路呢——对,因为我懒……实际上动态...vue-cli创建的项目,路由配置文件在src/router/index.js,在配置静态路由的时候只需要写好路由的名称、路径和从属关系(children)等,然后...
  • 主要介绍了vue 设置路由的登录权限的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue后台路由动态配置

    2021-04-22 15:41:51
    vue+elementUI后台路由动态配置 做了好几个项目都需要根绝用户角色做动态路由配置 1.现在附上页面的实现,其中根据路由表生成右侧复选框需要的数据,在改变复选框状态后,将已经勾选的路由名字传递给后台; 2.不同...
  • ✅05-Vue3 路由配置 ✅06-TypeScript 配置及说明 ✅07-Vue3 使用 axios ✅08-Vue3 axios 对象封装 ✅09-ESLint 配置及说明 ✅10-ESLint 与 Prettier 集成配置及说明 ✅11-Mock.js 模拟接口数据 ✅12-Vite
  • 这里感谢router新加的addRoute(route:Array)方法,让我们可以进行相关的路由权限的配置。 路由的权限配置这里我介绍一下结合后端的方法。 首先我们需要对于路由信息进行数据库的存储,通过后端进行路由的权限控制 ...
  • 如果需要添加新的菜单,只需要在路由配置中新增一条路由,就可以实现菜单的添加。 相信大家和我一样,有时候会跃跃欲试自己去实现一个菜单栏。那今天我就将自己实现的菜单栏的整个思路和代码分享给大家。 本篇文章...
  • 整个动态路由的设置是我自己研究写的,现在项目中没发现什么问题。如发现有问题,欢迎前来纠正,谢谢!!! 链接:https://pan.baidu.com/s/1J9R2TkqJk0H9JMjqp2WcFw 提取码:n4rk 复制这段内容后打开百度网盘手机...
  • 基于VUE实现前端动态路由权限控制

    千次阅读 2020-02-29 23:32:07
    最终还是看到花裤衩大佬的博客,终于对前端实现路由权限控制有了些许思路。 传送门:手摸手,带你用vue撸后台 下面这篇博客也有所参考:基于Vue实现后台系统权限控制 先说说我在项目中需要实现的效果: 由超级管理员...
  • 配置路由的时候,加一个roles的属性,通过判断用户的roles是否与路由的roles属性相匹配来作为显示隐藏的依据 { path: '/router', name: 'router', meta: { title: '标题', roles: ['admin','user'] }, ...
  • 在store/modules/permission.js中维护静态+动态路由权限,并在根目录下的permission.js实现导航守卫逻辑, 在/router/index.js中: import VueRouter from 'vue-router'; //constantRoutes 是静态路由,不需要...
  • (1)动态添加路由肯定用的是addRouter,在哪用? (2)vuex当中获取到菜单,怎样展示到界面 2.不管其他先试一下addRouter 找到router/index.js文件,内容如下,这是我自己先配置的登录路由 现在先不管请求到的菜单...
  • Vue动态配置路由权限

    2020-07-07 15:12:45
    import Vue from 'vue' import Vuex from 'vuex' import permission from './modules/permission' Vue.use(Vuex) const store = new Vuex....动态获取后台参数并渲染 import { constantRoutes } from '@/router' i
  • vue 动态路由实现

    千次阅读 2019-06-04 20:43:36
    vue开发中,第二个问题就是实现动态路由,根据后端权限配置获取对应的路由,最终生成对应的菜单。如下: 1、菜单接口返回结果的数据结构 [{ "url": "/system", "code": "sysmng", "name": "系统管理", "icon": ...
  • Vue实现动态路由

    2021-09-26 10:40:35
    (2)、复杂的路由权限设置:比如OA系统、多种角色的权限配置。通常需要后端返回路由列表,前端渲染使用 1、简单的角色路由设置 (1)配置项目路由权限 // router.js import Vue from 'vue' import Router from 'vu
  • vue实现动态路由一步到位

    千次阅读 多人点赞 2020-12-04 18:13:52
    最近在写vue项目,需要由后台传来当前用户对应权限的路由表,前端通过调接口拿到后处理(后端处理路由),就是配置vue动态路由啦。 由于错信了一些网上的文章:(,导致在这个问题上耗费了不少时间,想想,还是自己写一...
  • vue-router 在构建路由时提供了元信息 meta 配置接口,我们可以在元信息中添加路由对应的权限,然后在路由守卫中检查相关权限,控制其路由跳转。 可以在每一个路由的 meta 属性里,将能访问该路由的角色添加到 ...
  • 今天给大家写一篇关于vue校验登录状态,如果是非法登录就跳转到登录页面的逻辑 首先需要写一个路由守卫,它的原理是每次路由发生变化时触发具体写法如下: router.beforeEach((to, from, next) => { next() }) ...
  • vue权限控制路由vue-router 动态添加路由

    万次阅读 多人点赞 2018-09-13 15:13:36
    用户登录后返回权限菜单,前端根据权限菜单动态添加路由,然后再动态生成菜单栏。  思路如下:  一、定义初始化默认路由。 二、动态配置路由,这里是把所有组件中相应的路由配置成一个个的对象,根据后台返回...
  • 最近做项目,遇到了动态路由权限问题,看了一些文章,踩了两天坑,算是实现了。和大家分享一下,有错误的地方请大神指出来。目前没有接口,我采用的vuex存储用户名信息来获取配置的路由js。 1、我们先看一下我的...
  • 在官网下载的框架源码中,已经包含了远程菜单的配置了 我的版本 ant design vue pro 3.0.0 https://github.com/vueComponent/ant-design-vue-pro https://pro.antdv.com/docs/router-and-nav https://github.com/v

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,043
精华内容 4,017
关键字:

vue动态路由权限配置

vue 订阅