如何通过控制路由去控制用户是否能访问相关网页

在permisson文件写以下代码:

//通过后端接口返回的菜单去匹配该用户有权限访问的页面地址
import noProgress from 'noProgress';

function getArticleAuth() {
	//调接口获取菜单数据
    return new Promise(async (resolve, reject) => {
        let res = await req.doRequest({
            alias: "dcs-menu-getTopMenuList"
        })
        if (res.code == 0) {
        	//将菜单数据存在vuex中方便后面使用
            store.commit("SET_TOP_MENU", res.data);
            //解析路由地址
            let { route } = router.resolve(location.href);
    
            //没有管理配置权限
            if (!res.data.some(item => item.menuName == '管理配置')) {
                if (/^\/*\#\/manage/.test(route.hash)) {
                    return resolve(-1);
                }
            }

            //没有学习中心权限也没有管理后台权限
            if (!res.data.some(item => item.menuName == '学习中心') && !res.data.some(item => item.menuName 					 == '管理后台')) {
                if (/^\/*\#\/portal/.test(route.hash) || /^\/*\#\/console/.test(route.hash)) {
                    return resolve(-1);
                }
            }

            //没有管理后台权限,有学习中心权限
            if (!res.data.some(item => item.menuName == '管理后台') && res.data.some(item => item.menuName == '学习中心')) {
                //如果路由地址有console,代表是管理后台的页面或者文章详情页
                if (/^\/*\#\/console/.test(route.hash)) {
                    //如果地址是管理后台的文章详情地址,如果是已上线的文章则给用户权限访问
                    if (/\/newsDetail/.test(route.hash)) {
                        let status = route.hash.replace(/.*articleStatus=(\d).*/, (a, p, c, d) => { return p });
                        如果是已上线的文章
                        if (status == '1') {
                            return resolve(0);
                        }
                    }
                    //如果是已上线的优秀则给用户权限访问
                    if (/\/caseDetail/.test(route.hash)) {
                        let status = route.hash.replace(/.*status=(\d).*/, (a, p, c, d) => { return p });
                        if (status == '1') {

                            return resolve(0);
                        }
                    }
                    if (/\/sysMessage/.test(route.hash)) {
                        return resolve(0);
                    }
                    //如果跳转的地址不是文章详情页面,但是是管理后台的页面,则返回-1,该用户无权限访问
                    return resolve(-1);
                }
            }

            return resolve(0);
        }
        // store.commit("SET_MANAGE_AUTH", false);
        return resolve(-1);
    });
}

router.beforeEach(async (to, from, next) => {
    nProgress.start();
    let resCode = 0;
    if (to.path == '/error/index') {
        //如果跳转到错误页面,则next
        next();
    } else {
        resCode = await getArticleAuth();
        if (resCode === -1) {
            next({ path: '/error/index' })
        } else {
            let locStore;

            locStore = getLocStore();

            store.dispatch('setAppName', parseAppName(to.path));
            store.dispatch('setPageType', parsePageType(to.path));

            let lastPage;
            if (to.path === '/') {
                lastPage = locStore.app.lastPage;

                if (!lastPage)
                    next({
                        path: '/home/index'
                    });
                else
                    next({
                        path: lastPage
                    });
            } else {
                store.dispatch('setLastPage', to.path);
                next();
            }
        }


    }




    nProgress.done();
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值