appFormLowcode/src/utils/router/index.ts

import { createRouter,createWebHistory,createWebHashHistory,RouteRecordRaw } from "vue-router";
//进度条
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { useUserStoreHook } from '@/utils/pinia/stores/modules/userOrders'

const appTokenKey = import.meta.env.VITE_APP_TOKEN_KEY          //声明apptoken字符串
NProgress.configure({ showSpinner: false }); // 进度条
// 白名单路由
const whiteList = ["/login","/work_wechat"];

/**
@ 作者: 秦东
@ 时间: 2024-10-25 08:56:50
@ 功能: 静态路由
*/
export const staticRouting : RouteRecordRaw[] = [
    {
        path: '/',
        component: () => import('@/views/home/index.vue'),
        meta: { hidden: true },
    },
    {
        path: '/scanQrCode',
        component: () => import('@/views/home/scanQrCode.vue'),
        meta: { hidden: true },
    },
    {
        path: '/login',
        component: () => import('@/views/login/index.vue'),
        // component: () => import('@/views/login/silentlogin.vue'),
        meta: { hidden: true },
    },
    {
        path: '/unconLogin',
        component: () => import('@/views/login/unconLogin.vue'),
        meta: { hidden: true },
    },
    {
        path: '/login/silentlogin',
        component: () => import('@/views/login/silentlogin.vue'),
        meta: { hidden: true },
    },
    {
        path: '/form_table',
        component: () => import('@/views/formTable/index.vue'),
        meta: { hidden: true },
    },
    {
        path: '/form_table/taskList',
        component: () => import('@/views/formTable/myTask.vue'),
        meta: { hidden: true },
    },
    {
        path: '/form_table/taskListPage',
        component: () => import('@/views/formTable/taskListPage.vue'),
        meta: { hidden: true },
    },
    {
        path: '/form_table/taskInfo',
        component: () => import('@/views/formTable/taskInfo.vue'),
        meta: { hidden: true },
    },
    {
        path: '/news',
        component: () => import('@/views/news/index.vue'),
        meta: { hidden: true },
    },
    {
        path: '/app',
        component: () => import('@/views/app/index.vue'),
        meta: { hidden: true },
    },
    {
        path: '/user',
        component: () => import('@/views/user/index.vue'),
        meta: { hidden: true },
    },
    {
        path: '/work_wechat',
        component: () => import('@/views/lookCodePage/index.vue'),
        meta: { hidden: true },
    }
]

// createRouter:创建路由实列,可以管理多个路由
// createWebHistory：创建history模式的路由

const router = createRouter({
    history: createWebHashHistory(import.meta.env.BASE_URL),
    routes: staticRouting as RouteRecordRaw[],
    // 刷新时，滚动条位置还原
    scrollBehavior: () => ({ left: 0, top: 0 }),
})

//路由执行前检查路由
router.beforeEach(async (to:any, from:any, next:any) => {
    NProgress.start(); 
    console.log("路由执行前检查路由---0",appTokenKey)     
    const hasToken = localStorage.getItem(appTokenKey);     
    console.log("路由执行前检查路由---1",hasToken)            
    // if(to.name === "1"){
    //     next(false)
    // }else{
    //     next()
    // }
    // console.log("路由执行前检查路由",hasToken,"appTokenKey:",appTokenKey)
    if (hasToken) {
        console.log("路由执行前检查路由---4",hasToken,to.path)
        switch(to.path){
            case "/login":
                // 如果已登录，跳转首页
                next({ path: "/" });
                NProgress.done();
                break;
            case "/login/silentlogin":
                next({ path: "/" });
                NProgress.done();
                break;
            case "/work_wechat":
                next();
                NProgress.done();
                break;
            default:
                const userStore = useUserStoreHook();
                const hasRoles = userStore.userKeying && userStore.userKeying.length > 0;

                console.log("路由执行前检查路由---3",userStore.userKeying,hasRoles)

                
                if (hasRoles) { //判断Key是否存在！好判断是否已经登录！
                    if (to.matched.length === 0) {
                        from.name ? next({ name: from.name }) : next("/404");
                    } else {
                        next();
                    }
                } else {
                    try {
                        // const { perms } = await userStore.getInfo();
                        // const accessRoutes = await permissionStore.generateRoutes(perms);
                        next({ ...to, replace: true });
                    } catch (error) {
                        // console.error("移除 token 并跳转登录页",error);
                        // 移除 token 并跳转登录页
                        await userStore.setUserInfoNull();
                        next(`/login`);
                        NProgress.done();
                    }
                }
                
                break;
        }
    } else {
        console.log("路由执行前检查路由---2",hasToken,to.path,whiteList.indexOf(to.path))
        //未登录的情况下可以访问白名单的数据
        if(whiteList.indexOf(to.path) !== -1){
            next();
        }else{
            next(`/login`);
            NProgress.done();
        }
    }
})


/**
@ 作者: 秦东
@ 时间: 2024-10-25 09:19:52
@ 功能: 路由执行完毕
*/
router.afterEach(() => {
    NProgress.done();           //关闭进度条！
});
//设置标签title
// router.afterEach((to, form) => {
//     document.title = to.meta.title || '项目测试'
// })
/**
@ 作者: 秦东
@ 时间: 2024-10-23 09:02:10
@ 功能: 重置路由
*/
export function resetRouter() {
    router.replace({ path: "/" });
}
export default router