前端权限校验仅作为一种辅助手段,真正的权限控制应当在后端进行。
常见步骤:
// 导入需要的模块
import Vue from 'vue';
import VueRouter from 'vue-router';
// 注册Vue Router插件
Vue.use(VueRouter);
// 创建路由实例
const router = new VueRouter({
routes: [
{
path: '/',
component: Home,
meta: {
requiresAuth: true // 需要登录才能访问的路由
}
},
{
path: '/dashboard',
component: Dashboard,
meta: {
requiresAuth: true,
requiresAdmin: true // 需要登录且为管理员角色才能访问的路由
}
},
{
path: '/profile',
component: Profile,
meta: {
requiresAuth: true
}
},
// ...
]
});
// 添加全局的路由导航守卫
router.beforeEach((to, from, next) => {
const isAuthenticated = checkAuth(); // 检查用户是否已登录
const isAdmin = checkAdmin(); // 检查用户是否为管理员
if (to.meta.requiresAuth && !isAuthenticated) {
// 需要登录但用户未登录
next('/login');
} else if (to.meta.requiresAdmin && (!isAuthenticated || !isAdmin)) {
// 需要管理员角色但用户未登录或未具备管理员权限
next('/access-denied');
} else {
// 允许访问
next();
}
});
// 导出路由实例
export default router;
常见步骤:
// 在Vue组件中定义一个自定义指令
Vue.directive('permission', {
bind: function (el, binding, vnode) {
// 获取当前用户的权限信息(假设权限信息存储在Vuex中的user模块)
const userRoles = vnode.context.$store.state.user.roles;
// 获取指令传递的权限要求
const requiredRoles = binding.value;
// 检查用户权限与要求的权限是否匹配
const hasPermission = requiredRoles.some(role => userRoles.includes(role));
// 根据权限控制显示或隐藏组件
if (!hasPermission) {
el.style.display = 'none';
}
}
});
常见路由拦截:
// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 在路由跳转前进行权限校验
router.beforeEach((to, from, next) => {
// 获取用户的权限信息,可以从后端获取或从本地存储中获取
const userRoles = getUserRoles()
// 检查目标路由是否需要权限校验
if (to.meta.requiresAuth) {
// 检查用户是否具有足够的权限
if (checkUserRole(userRoles, to.meta.requiredRoles)) {
// 用户具有足够权限,继续跳转
next()
} else {
// 用户权限不足,重定向到权限不足的页面或显示提示信息
next('/unauthorized')
}
} else {
// 不需要权限校验的路由,直接跳转
next()
}
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')
常见步骤:
// rolePermissions.js
export default {
admin: ['addUser', 'deleteUser', 'updateUser'],
manager: ['addUser', 'updateUser'],
editor: ['addArticle', 'editArticle'],
guest: []
}
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import rolePermissions from './rolePermissions' // 角色权限配置文件
Vue.use(VueRouter)
const routes = [
{ path: '/login', component: Login },
// 其他通用路由...
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
// 根据角色权限配置动态生成路由
function generateRoutes(allowedRoles) {
const dynamicRoutes = allowedRoles.reduce((routes, role) => {
const permissions = rolePermissions[role]
// 根据权限动态生成路由
const roleRoutes = permissions.map(permission => {
return {
// 根据权限信息设置路由path、component等属性
path: permission,
component: () => import(`./views/${permission}.vue`)
}
})
return routes.concat(roleRoutes)
}, [])
// 将动态生成的路由添加到路由配置中
router.addRoutes(dynamicRoutes)
// 如果需要,将动态生成的路由存储到本地,以便在刷新页面后继续使用
// localStorage.setItem('dynamicRoutes', JSON.stringify(dynamicRoutes))
}
export default router
// Example.vue
<script>
export default {
// 组件被创建前的路由导航守卫
beforeRouteEnter(to, from, next) {
// 获取当前用户的角色
const userRole = getCurrentUserRole()
// 根据当前角色的权限判断是否有权限访问该页面
if (checkPermission(userRole, to.path)) {
next()
} else {
next('/unauthorized')
}
},
// ...
}
</script>