fanruan-edu-cas/src/router.js

import { createRouter, createWebHistory } from 'vue-router';
import Layout from '@/layout/index.vue';
import store from '@/store';
import { refreshToken } from '@/api/auth';
// import '@/utils/fineClubSDK';
import { getUid, getExpiresTime } from '@/utils/cookie';
import { delUrlParams } from '@/utils/urlQuery';

const routes = [
  {
    path: '/',
    name: 'index',
    component: Layout,
    children: [
      {
        path: '/',
        name: 'index',
        component: () => import('@/views/index.vue'),
        meta: {
          title: '帆软学院-培养企业亟需的数据人才',
          isMobile: 1,
        },
      },

      {
        path: '/cityclass',
        name: 'cityclass',
        component: () => import('@/views/cityclass.vue'),
        meta: {
          title: '城市课堂 - 帆软学院',
          active: 'cityclass',
        },
      },

      /**
       * 视频课
       */
      {
        path: '/video',
        name: 'videoindex',
        component: () => import('@/views/video/indexVideo.vue'),
        meta: {
          title: '视频课 - 帆软学院',
          isMobile: 1,
        },
      },
      {
        path: '/video/:courseid',
        name: 'video_course',
        component: () => import('@/views/video/video_course.vue'),
        meta: {
          title: '视频课 - 帆软学院',
          active: 'video',
          isMobile: 1,
        },
      },
      {
        path: '/video/play/:playid',
        name: 'video_course_play',
        component: () => import('@/views/video/play.vue'),
        meta: {
          title: '播放课程 - 视频课',
          active: 'video',
          isMobile: 1,
        },
      },
      /**
       * 班级
       */
      {
        path: '/class',
        name: 'StudyClass',
        component: () => import('@/views/class/indexClass.vue'),
        meta: {
          title: '学习班 - 帆软学院',
        },
      },

      /**
       * 进入班级教室
       */
      {
        path: '/class/:classid',
        name: 'layoutClass',
        component: () => import('@/views/class/class.vue'),
        meta: {
          title: '课程章节 - 学习班',
          active: 'class',
        },
        children: [
          {
            path: '/class/:classid',
            name: 'class_lesson',
            component: () => import('@/views/class/class_lesson.vue'),
            meta: {
              title: '课程章节 - 学习班',
              active: 'class',
              tab: 'class_lesson',
            },
          },
          {
            path: '/class/homework/:classid',
            name: 'class_homework',
            component: () => import('@/views/class/class_homework.vue'),
            meta: {
              title: '我的作业 - 学习班',
              active: 'class',
            },
          },
          {
            path: '/class/forum/:classid',
            name: 'class_forum',
            component: () => import('@/views/class/class_forum.vue'),
            meta: {
              title: '班级论坛 - 学习班',
              active: 'class',
              tab: 'class_forum',
            },
          },
          {
            path: '/class/forum/:classid/:tid',
            name: 'class_forum_thread',
            component: () => import('@/views/class/class_forum_thread.vue'),
            meta: {
              title: '班级论坛 - 学习班',
              active: 'class',
              tab: 'class_forum',
            },
          },
        ],
      },
      /**
       * 老师后台管理
       */
      {
        path: '/class/admin/:classid',
        name: 'adminLayoutClass',
        component: () => import('@/views/class/admin/index_admin_class.vue'),
        meta: {
          title: '学生管理 - 学习班',
          active: 'class',
        },
        children: [
          {
            path: '/class/admin/student/:classid',
            name: 'student_admin_class',
            component: () =>
              import('@/views/class/admin/student_admin_class.vue'),
            meta: {
              title: '学生管理 - 学习班',
              active: 'class',
            },
          },
          {
            path: '/class/admin/homework/:classid',
            name: 'homework_admin_class',
            component: () =>
              import('@/views/class/admin/homework_admin_class.vue'),
            meta: {
              title: '批改作业 - 学习班',
              active: 'class',
            },
          },
          {
            path: '/class/admin/schedule/:classid',
            name: 'schedule_admin_class',
            component: () =>
              import('@/views/class/admin/schedule_admin_class.vue'),
            meta: {
              title: '教学进度管理 - 学习班',
              active: 'class',
            },
          },
          {
            path: '/class/admin/notice/:classid',
            name: 'notice_admin_class',
            component: () =>
              import('@/views/class/admin/notice_admin_class.vue'),
            meta: {
              title: '公告栏管理 - 学习班',
              active: 'class',
            },
          },
        ],
      },

      /**
       * 直播
       */
      {
        path: '/live',
        name: 'live',
        component: () => import('@/views/live/live.vue'),
        meta: {
          title: '直播 - 帆软学院',
          isMobile: 1,
        },
      },

      {
        path: '/live/:liveid',
        name: 'live_view',
        component: () => import('@/views/live/live_view.vue'),
        meta: {
          title: '直播 - 帆软学院',
          active: 'live',
          isMobile: 1,
        },
      },
      // 资源导航
      {
        path: '/more',
        name: 'more',
        component: () => import('@/views/more.vue'),
        meta: {
          title: '资源导航 - 帆软学院',
          active: 'more',
        },
      },

      // 新手入门-地图 finereport
      {
        path: '/guide/finereport',
        name: 'guide_finereport',
        component: () => import('@/views/video/guide/finereportGuide2023.vue'),
        meta: {
          title: 'FineReport入门学习路径 - 帆软学院',
          active: 'studypath',
        },
      },

      // 新手入门-地图 finebi
      {
        path: '/guide/finebi',
        name: 'guide_finebi',
        component: () => import('@/views/video/guide/finebi.vue'),
        meta: {
          title: 'FineBI入门学习路径 - 帆软学院',
          active: 'studypath',
        },
      },

      // 新手入门-地图 jiandaoyun
      {
        path: '/guide/jiandaoyun',
        name: 'guide_jiandaoyun',
        component: () => import('@/views/video/guide/jiandaoyun.vue'),
        meta: {
          title: '简道云入门学习路径 - 帆软学院',
          active: 'studypath',
        },
      },

      // fr-学习路径首页
      {
        path: '/studypath/finereport',
        name: 'studypathfr',
        component: () => import('@/views/studypath/finereportStudyPath2023.vue'),
        meta: {
          title: '报表开发工程师 - 学习路径 - 帆软学院',
          active: 'studypath',
          isMobile: 1,
        },
      },
      // bi-学习路径首页
      {
        path: '/studypath/finebi',
        name: 'studypathbi',
        component: () => import('@/views/studypath/finebi.vue'),
        meta: {
          title: 'BI分析师 - 学习路径 - 帆软学院',
          active: 'studypath',
          isMobile: 1,
        },
      },
      // bi-学习路径首页
      {
        path: '/studypath/finebiAdmin',
        name: 'studypathbiAdmin',
        component: () => import('@/views/studypath/finebiAdmin.vue'),
        meta: {
          title: 'FineBI管理员 - 学习路径 - 帆软学院',
          active: 'studypath',
          isMobile: 1,
        },
      },

      // 简道云-学习路径首页
      {
        path: '/studypath/jiandaoyun',
        name: 'studypath_page_jdy',
        component: () => import('@/views/studypath/jiandaoyun.vue'),
        meta: {
          title: '零代码开发工程师 - 学习路径 - 帆软学院',
          active: 'studypath',
          isMobile: 1,
        },
      },

      // FDL-学习路径首页
      {
        path: '/studypath/finedatalink',
        name: 'finedatalink',
        component: () => import('@/views/studypath/fineDataLink.vue'),
        meta: {
          title: '数据开发工程师 - 学习路径 - 帆软学院',
          active: 'studypath',
          isMobile: 1,
        },
      },
    ],
  },

  {
    path: '/class/play/:classid/:videoid',
    name: 'classPlay',
    component: () => import('@/views/class/play.vue'),
    meta: {
      title: '播放课程 - 学习班',
      active: 'class',
    },
  },

  {
    path: '/live/play/:liveid',
    name: 'live_play',
    component: () => import('@/views/live/live_play.vue'),
    meta: {
      title: '进入直播 - 直播',
      active: 'live',
      isMobile: 1,
    },
  },

  // 404
  {
    path: '/:catchAll(.*)',
    name: '请求错误',
    component: () => import('@/components/404.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
  linkActiveClass: 'active',
  linkExactActiveClass: 'active',
  scrollBehavior() {
    return { top: 0 };
  },
});

// 通过导航守卫 判断并刷新token
let accessToken = store.getters.get_token;
let expires = getExpiresTime();
let getdate = parseInt(new Date().getTime() / 1000);

router.beforeEach((to, from, next) => {
  // const { title } = to.meta;
  // document.title = getPageTitle(title);
  // console.log('to====',to);
  
  const get_ticket = to.query.ticket || 0;
  const get_type = to.query.type ? to.query.type : '0';

  // ticket空执行删除
  const is_ticket_null = new URL(window.location);
  if (is_ticket_null.searchParams.has("ticket")) {
    if (get_ticket === 0 || get_ticket == 'null') {
      console.log('ticket空');
      parent.window.location.replace(process.env.VUE_APP_ID_URL + '/login/token/logout?referrer=' + encodeURIComponent(process.env.VUE_APP_EDU_URL));
    }
  }

  // fineClubSDK接入
  let app = 'edu';
  let isDev = process.env.VUE_APP_ENV == 'dist' ? false : true;
  function getLoginUid() {
    return getUid() || 0;
  }
  window.fineClub.config({ app, getLoginUid, debug: isDev, dev: isDev });

  // 监听登录
  function callback(data) {
    console.log('callback_data', data);
    if (!get_ticket && data.uid > 0) {
      console.log('跳转到通行证登录');
      let ticket_login_url = '/v1/user/cas/get/ticket/?redirect='+to.path+'&service='+process.env.VUE_APP_EDU_URL+'/v1/user/cas/edu/login/';
      window.location.href = ticket_login_url;
    }
    if (!data.uid) {
      console.log('监听到登出', 'del_token');
      store.commit('del_token');
      window.location.reload();
    }
  }
  window.fineClub.onLoginChange(callback);

  // 本地开发 要确保passport.fanruan.com的登录uid和本地一致 否则会无限刷新
  // if(!getUid()){
  //   callback({uid:73851});
  // }

  if (to.meta.title) {
    document.title = to.meta.title;
  }

  // 如果有token和过期时间，然后快过期了执行刷新token
  if (!get_ticket && accessToken && expires && expires - getdate < 60 * 2) {
    refreshToken().then((res) => {
      if (res.code === 200 && res.message != -1) {
        store.commit('set_token', res.data);
      } else {
        // 如果刷新失败，清空所有登录信息
        console.log('router刷新token', 'del_token');
        store.commit('del_token');
      }
    });
    // 刷新完毕后，延时进度页面
    setTimeout(function () {
      next();
    }, 500);
  }else if (get_type === 'logout') {
    console.log('logout', 'del_token');
    store.commit('del_token');
    setTimeout(function () {
      let jumpUrl = delUrlParams(location.href, ['type']);
      window.location.replace(jumpUrl);
      // next();
    }, 500);
  } else {
    next();
  }
});

export default router;