• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

前端权限控制-基于vue-router的动态路由实现

互联网 diligentman 2周前 (04-09) 9次浏览

转:

前端权限控制-基于vue-router的动态路由实现

在中后台应用系统开发中,大部分情况下会涉及到用户权限控制,除了后端做权限验证外,前端在用户访问时也需要基于用户权限做相应控制。针对前端使用vue框架的情况,对页面一级的权限控制,常规处理是在页面导航栏通过控制导航显隐控制权限,但在浏览器地址栏输入访问路径依然可以访问,可以用vue-router的动态路由来实现权限控制。

// router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

// 默认路由只配置无需权限的页面
export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      redirect: '/user/login'
    },
    {
      path: '/user/login',
      name: 'login',
      component: () => import('@/views/user/Login.vue')
    }
  ]
})

登录成功后通过addRoutes更新路由配置

import routeConfig from '@/routeConfig'

this.$api.user.login({
  username,
  password
}).then(res => {
  if(res.data.code === 0) {
    // 登录成功,根据返回权限码配置动态路由
    let router = routeConfig();
    router.routes.forEach(route => this.$router.options.routes.push(route));
    // 必须将路由push到options中才生效
    this.$router.addRoutes(router.routes);
  }
})

正常情况下这样就可以实现动态路由控制了,但刷新页面发现会出现404,因为刷新时vue实例重新初始化了,导致动态路由被还原成默认路由,此时需要将权限码存储在本地,在main.js中根据权限码重新生成动态路由

// 刷新页面时根据本地缓存重新生成路由
if(sessionStorage.getItem('permission')) {
  let routerData = routeConfig();
  routerData.routes.forEach(route => router.options.routes.push(route));
  router.addRoutes(routerData.routes);
}

以上步骤基本可以实现动态添加路由并在刷新页面是维持路由状态,但访问根路径会始终跳转到登录页,无法默认跳转到首页,这个问题目前还未想到好的解决方案。

转:

前端权限控制-基于vue-router的动态路由实现

–Posted from Rpc

展开阅读全文

© 著作权归作者所有

举报

0


0 收藏

微信
QQ
微博

分享

作者的其它热门文章

Spring + Dubbo + zookeeper (linux) 框架搭建
nginx 同一端口根据不同域名转发到不同端口
SpringMvc + Shiro[数据库存权限] 配置 ;[附git.oschina的项目地址]
Spring SpringMvc 3.0 + MyBatis 整合


程序员灯塔
转载请注明原文链接:前端权限控制-基于vue-router的动态路由实现
喜欢 (0)