您现在的位置是：网站首页>>前端技术>>Vue

一.数据库设计：

1. 创建一个表对应vue项目中router.js中路由的name值：





2.创建一个表 由于某个角色可以访问的页面





二.后端设计：


在登录时获取该角色可以访问的页面，并且通过接口返回：


/**
     *[getRoles 获取用户权限信息]
     * @author wangjian
     * @version [0.1]
     * @date 2018/7/17
     */
public function getRoles($user_no) {
$result = [];
$roles = Roles::find()->andWhere(['user_no' => $user_no])->andWhere(['is_deleted' => 0])->asArray()->one();
if (!$roles) {
return $result;
}
$module_ids = explode(',', $roles['module_ids']);
//获取页面权限
$modules = Modules::find()->select('module_path')->andWhere(['id' => $module_ids])->andWhere(['is_deleted' => 0])->asArray()->all();
foreach ($modules as $model) {
$result[] = $model['module_path'];
}
return $result;
}






三.vue设计：

1. 调用登录接口将权限信息保存到cookies中:
   

/**
 * 登录接口
 */
export const apiLogin = (_this, data) => {
    return _this.$post('/v1/login/login', data).then(res => {
        if(res.status == -1){
            apiLoginOut(_this, {
            });
        }else{
        Cookies.set('user',res.data.user_name);
        Cookies.set('user_no',res.data.user_no);
        Cookies.set('roles',res.data.roles);
        _this.$store.commit('setAvator', 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3448484253,3685836170&fm=27&gp=0.jpg');
            return res;
    }
    });
};






2.修改权限配置方法updateMenulist

updateMenulist (state) {
            //权限菜单配置方法
            let roles = Cookies.get('roles') ? JSON.parse(Cookies.get('roles')) : [];
            let tmpObj = {};
            if(roles && roles.length){
                roles.forEach(item => {
                    tmpObj[item] = true;
            });
            state.routers.forEach(item => {
                if (tmpObj[item.name]) {
                    item.access = 1;
                }else {
                    item.access = 0;
                }
                delete tmpObj[item.name];
                if (item.children && item.children.length) {
                        item.children.forEach(item => {
                            if (tmpObj[item.name]) {
                            item.access = 1;
                        } else {
                            item.access = 0;
                        }
                        delete tmpObj[item.name];
                    });
                }
            });
            let accessCode = 1;
            let menuList = [];
            setStore('rolesMenuList', JSON.stringify(state.routers));
            appRouter.forEach((item, index) => {
                if (item.access !== undefined) {
                    if (Util.showThisRoute(item.access, accessCode)) {
                        if (item.children.length === 1) {
                            menuList.push(item);
                        } else {
                            let len = menuList.push(item);
                            let childrenArr = [];
                            childrenArr = item.children.filter(child => {
                                if (child.access !== undefined) {
                                return child;
                                } else {
                                    return child;
                                }
                            });
                            menuList[len - 1].children = childrenArr;
                        }
                    }
                }
            });
            state.menuList = menuList;
            }else{
                this.$Message && this.$Message.error('获取菜单权限失败');
            }
        },




3.在main.js中修改router.beforeEach中的方法

router.beforeEach((to, from, next) => {
    iView.LoadingBar.start();
    Util.title(to.meta.title);
    if (Cookies.get('locking') === '1' && to.name !== 'locking') { // 判断当前是否是锁定状态
        next({
            replace: true,
            name: 'locking'
        });
    } else if (Cookies.get('locking') === '0' && to.name === 'locking') {
        next(false);
    } else {
        if (!Cookies.get('user') && to.name !== 'login') { // 判断是否已经登录且前往的页面不是登录页
            next({
                name: 'login'
            });
        } else if (Cookies.get('user') && to.name === 'login') { // 判断是否已经登录且前往的是登录页
            Util.title();
            next({
                name: 'home_index'
            });
        } else {
            let rolesMenu = getStore('rolesMenuList')?JSON.parse(getStore('rolesMenuList')):[];
            if((Util.getRouterObjByName(rolesMenu, to.name).access === 1 ) || to.name === 'login' || to.name === 'error-403' || to.name === 'locking' || to.name === 'error-404' || to.name === 'error-500'){
                Util.toDefaultPage([otherRouter, ...appRouter], to.name, router, next); // 如果在地址栏输入的是一级菜单则默认打开其第一个二级菜单的页面
            }else{
                next({
                    replace: true,
                    name: 'error-403'
                });
            }
        }
    }
});




4:Store的设置和获取方法：

/**
 * 存储localStorage
 */
export const setStore = (name, content) => {
    if (!name) return false;
    if (typeof content !== 'string') {
        content = JSON.stringify(content);
    }
    window.localStorage.setItem(name, content);
}
/**
 * 获取localStorage
 */
export const getStore = name => {
    if (!name) return;
    return window.localStorage.getItem(name);
}
/**
 * 删除localStorage
 */
export const removeStore = name => {
    if (!name) return;
    window.localStorage.removeItem(name);
}

5:修改getRouterObjByName方法：

util.getRouterObjByName = function (routers, name) {
    let routerObj = {};
    routers.forEach(item => {
        if (item.name === 'otherRouter') {
        item.children.forEach((child, i) => {
            if (child.name === name) {
            routerObj = item.children[i];
        }
    });
    } else {
        if (item.children.length === 1) {
            if (item.children[0].name === name) {
                routerObj = item.children[0];
            }
        } else {
            item.children.forEach((child, i) => {
                if (child.name === name) {
                routerObj = item.children[i];
            }
        });
        }
    }
});
    return routerObj;
};




设置主菜单左侧权限(view/main-components/shrinkable-menu/components/sidebarMenu.vue)：



增加此处




添加按钮权限控制指令

//权限按钮控制指令
Vue.directive('auth', {
    inserted: function (el, binding) {
        let hasAuth = false;
        if(Cookies.get('roles')){
            let roles = JSON.parse(Cookies.get('roles'));
            let value = binding.value;
            roles.forEach(item => {
                if (item === value) {
                hasAuth = true;
            }
            });
        }
        if(!hasAuth){
            el.parentNode.removeChild(el);
        }
    }
});




5.按钮权限控制在页面上使用方法为：





到此vue实现权限配置完成