在中后盾利用零碎开发中,大部分状况下会波及到用户权限管制,除了后端做权限验证外,前端在用户拜访时也须要基于用户权限做相应管制。针对前端应用 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);
}
以上步骤根本能够实现动静增加路由并在刷新页面是维持路由状态,但拜访根门路会始终跳转到登录页,无奈默认跳转到首页,这个问题目前还未想到好的解决方案。