前端权限的意义

​ 从根本上讲前端仅仅只是视图层的展示, 权限的核心是在于服务器中的数据变化,所以后端才是权限的关键,后端权限可以控制某个用户是否能够查询数据, 是否能够修改数据等操作。前端权限的控制本质上来说,就是控制端的视图层的展示和前端所发送的请求。但是只有前端权限控制没有后端权限控制是万万不可的。前端权限控制只可以说是达到锦上添花的效果。

​如果仅从能够修改服务器中数据库中的数据层面上讲, 确实只在后端做控制就足够了, 那为什么越来越多的项目也进行了前端权限的控制, 主要有这几方面的好处。
降低非法操作的可能性
不怕贼偷就怕贼惦记, 在页面中展示出一个就算点击了也最终会失败的按钮,势必会增加有心者非法操作的可能性。
尽可能排除不必要请求, 减轻服务器压力
没必要的请求, 操作失败的请求, 不具备权限的请求, 压根儿就不应该发送, 请求少了, 自然也会减轻服务器的压力。
提高用户体验
根据用户具备的权限为该用户展现自己权限范围内的内容, 避免在界面上给用户带来困扰, 让用户专注于分内之事。

vue项目中做权限方面的功能,首先,用户登录后从后端接口获取用户的权限列表,将获取到的用户权限列表数据存储到vuex和sessionStorage中,然后在路由文件中,配置用户权限路由,将所有需要动态加载的路由定义,然后拿到router路由对象上的options的routes元素,然后通过映射关系将获取到的权限列表数据和定义好的路由关联起来,然后获取到vuex中存储的用户权限列表,编列列表,将每一项权限数据添加到router.options.routes中,最后将修改完的路由通过addRouter方法添加到路由对象上即可

<!-- router下index.ts -->
const mainRule = { path: '/main', component: () => import('@/views/main/main.vue') }
const userRule = { path: '/user', component: () => import('@/views/user/user.vue') }
<!-- 创建接口返回的权限字段和创建的路由规则间的映射关系 -->
const ruleMapping = {
    'mains' : mainRule,
    'users' : userRule
}

export initRoutes() {
    <!-- 根据二级权限数据,对路由规则进行动态的添加 -->
    const currentRoutes = router.options.routes
    const ruleData = sessionStorage.getItem('ruleData')
    <!-- 此处的item就是二级权限数据 -->
    ruleData.forEach(item => {
        item.children.forEach(item => {
            <!-- 对数据进行映射关系使其对应 -->
            const temp = ruleMapping[ item.path]
            currentRoutes[2].children.push(temp)
        })
    })
    router.addRoutes(currentRoutes)
}

<!-- 在app.vue和login登录成功的方法中调用路由文件中动态添加路由的方法进行调用 -->
<!-- app.vue -->
import { initRoutes } from '@/router'
created() {
    initRoutes()
}