fanruan-edu-cas/src/router-jump-cas.js

import { createRouter, createWebHistory } from 'vue-router';
import Layout from '@/layout/index.vue';
import store from '@/store';
import { refreshToken, casLogin } 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: '直播 - 帆软学院',
        },
      },

      {
        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/finereport.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/finereport.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,
        },
      },
    ],
  },

  {
    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);

  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){
      console.log('ticket空');
      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;
  const isLogin = getUid() || 0;
  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('跳转到通行证登录',isLogin);
        window.location.replace(process.env.VUE_APP_ID_URL+'/login/signin/?app=edu&protocol=cas&referrer='+encodeURIComponent(window.location.href));
    }
    // else{
    //   if(isLogin > 1 && process.env.VUE_APP_ENV != 'development'){
    //     console.log('callback','del_token');
    //     console.log('isLogin',isLogin);
    //     store.commit('del_token');
    //     setTimeout(function() {
    //       window.location.replace(process.env.VUE_APP_EDU_URL+to.path);
    //     }, 250);
    //   }
    // }
  }
  window.fineClub.onLoginChange(callback);


  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_ticket) {
    casLogin(get_ticket).then((res) => {      
      if (res.code === 200 && res.status != -1) {
        console.log('casLogin', res);
        store.commit('set_token', res.data);
        setTimeout(function () {
          window.location.replace(process.env.VUE_APP_EDU_URL + to.path);
          // parent.location.reload();
          // let jumpUrl = delUrlParams(location.href,['ticket','sid']);
          // console.log('jumpUrl',jumpUrl);
          // parent.window.location.replace(jumpUrl);
        }, 250);
      } else {
        next();
      }
    });

  } 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;