zoukankan      html  css  js  c++  java
  • vue2路由拦截

    这是一个剪刀的路由拦截

    router分位两个文件,一个是路由统一配置,一个是具体的路由信息

    1路由拦截

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import routes from './index.config'
    import { routerList } from '@/common/js/url-white-list'
    Vue.use(VueRouter)

    const router = new VueRouter({
    mode: 'hash',
    // mode: 'history',
    base: __dirname,
    routes,
    //在顶部点击当前路由菜单回到顶部
    scrollBehavior() {
    return {
    x: 0,
    y: 0
    }
    /* 跳转页面返回顶部 */
    }
    })
     
    router.beforeEach((to, from, next) => { //简单的判断

    // 百度统计,上报数据
    if (window._hmt) {
    if (to.path) {
    // eslint-disable-next-line
    window._hmt.push(['_trackPageview', '/#' + to.fullPath]);
    }
    }
    let roleType = window.localStorage.getItem('roleType');   //用户角色
    // let url = window.location.hash ? window.location.hash.split('#')[1] : 
    const token = window.localStorage.getItem("access_token")//是否登录
    let openid = window.localStorage.getItem("openid");
    if (routerList.indexOf(to.path) === -1) { //不需要登录后回来的地址 比如修改密码页面
    window.localStorage.setItem('redirectUrl', to.path);   //记录未登录之前从哪个菜单点击的登录的,登录成功之后跳转到这个页面
    if (!to.meta.requireAuth && !token && !openid) {   //如果用户未登录没有openid又不需要用户登录的页面 比如微官网的页面 到登录页面之后进入beforeRouteEnter之后用户未绑定登录关系需要返回的页面
    window.localStorage.setItem('landingUrl', to.path);
    }
    }
    if ((to.meta.requireAuth || !openid) && routerList.indexOf(to.path) === -1) {
    if (!token) {
    document.title = "登录";
    next({
    path: '/login',
    });
    } else if (roleType && to.meta.role.indexOf(roleType) === -1) {   //没权限
    if (to.meta.requireRole) { //暂无权限
    document.title = "能源e+";
    next({
    path: '/jurisd',
    });
    // Toast({ message: '您没有访问权限', duration: 1000 })
    }
    } else {
    document.title = to.meta.title;
    next();
    }
    } else {
    document.title = to.meta.title;
    next();
    }

    });

    export default router
  • 相关阅读:
    堆排序
    我花了一年时间来学机器学习
    一个由进程内存布局异常引起的问题
    老曹眼中的Linux基础
    Select模型原理
    socket编程的select模型
    [插件] 如何在一个页面中使用多个SWFUpload对象上传文件
    [算法] 拖动排序
    [算法] 应用版本更新逻辑
    [oracle] 如何使用myBatis在数据库中插入数据并返回主键
  • 原文地址:https://www.cnblogs.com/dmwcq/p/11180724.html
Copyright © 2011-2022 走看看