最近在用Vue做项目的时候,遇到前端页面的访问权限控制问题。参考了网上一些文章的思路,并且自己动手做了一个demo。
应用场景如下:一个网站多个角色,例如admin(管理员),guest(普通客户),不同权限的用户能访问的网页权限不同。
权限admin可看到admin网页和Guest页,权限guest只能访问Guest。
实现思路如下:
1、网页路由(route)中定义的每个路由都有meta属性,属性值防止可访问该路由的值。
2、路由的全局前置守卫(beforeEach)会判断路由用户是否登录(未登录跳转至登录界面),以及登录用户是否有权限查看该页面(无权限跳转至tips页面)。
3、home中导航树根据权限信息的不同,渲染不同的页面。
两个用户名和密码:
1、admin, 123456,可查看两个页面
2、guest, 123456只能查看一个页面
项目git地址(https://github.com/xubaodian/savefycetificate.git)
import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Home from '@/components/Home'
import Admin from '@/components/Admin'
import Guest from '@/components/Guest'
import Tips from '@/components/Tips'
import $ from "jquery"
Vue.use(Router)
let routerMap = [
{
path: '/',
redirect:'/login',
component: Login,
meta: ['admin', 'user']
},
{
path:'/login',
name:

本文介绍了在Vue项目中实现页面访问权限控制的方法。通过在Vue-Router的路由配置中设置meta属性,结合Vuex进行用户权限判断,利用全局前置守卫beforeEach检查用户登录状态和权限,实现不同角色访问不同页面的功能。同时,展示了具体的用户权限示例及项目的GitHub链接。
最低0.47元/天 解锁文章

被折叠的 条评论
为什么被折叠?



