vue.js路由如何配置，及全局前置路由守卫(做所有请求登录验证)、路由独享守卫（访问路由前身份验证）

1.编写路由配置文件 router.js

以及配置全局前置路由守卫和路由独享守卫

//路由配置文件
//作用是将指定的路由地址切换成对应的模块
// eslint-disable-next-line no-unused-vars
import Router from "vue-router"
// eslint-disable-next-line no-unused-vars
import Vue from "vue"
//在Vue中加载路由模块
Vue.use(Router)
 
// eslint-disable-next-line no-unused-vars
// 定义 Foo 组件，你可以在 Vue 应用中的任何地方使用它,
// 可以在路由配置中将 Foo 作为一个路由组件来使用，
// 或者在其他组件中通过标签的形式来嵌套使用它。
// const Foo = { template: '
foo
' }
 
// 写路由表
const routes = [
    // 进入vue项目默认进入登录页面
    {
        path: "/",
        redirect: "/Login"
    },
    {
        path: "/Login",
        component: () => import("../view/Login"),
        meta: {
            skipAuthCheck: true // 添加一个标记，表示不需要进行身份验证检查
        }
    },
    {
        path: "/index",
        component: () => import("../components/index"),
        children: [
            // 默认显示select_update_delete页面
            { path: '/', redirect: "/hello" },
            {
                path: "/hello",
                component: () => import("../components/hello"),
            },
            //用户管理
            {
                path: '/s_u_d', component: () => import("../components/system/UserManger/select_update_delete"),
                meta: { requiresAuth: true },
                beforeEnter: user_typeValidate('系统管理员'),
            },
            {
                path: '/addUser', component: () => import("../components/system/UserManger/addUserForm"),
                meta: { requiresAuth: true },
                beforeEnter: user_typeValidate('系统管理员'),
            },
            //出诊管理
            {
                path: '/chuZhen', component: () => import("../components/system/MenZhenManger/chuZhenManger"),
                meta: { requiresAuth: true },
                beforeEnter: user_typeValidate('系统管理员'),
            },
            {
                path: '/addChuZhen', component: () => import("../components/system/MenZhenManger/addChuZhenForm"),
                meta: { requiresAuth: true },
                beforeEnter: user_typeValidate('系统管理员'),
            },
            //就诊管理
            {
                path: '/jiuZhen', component: () => import("../components/medical/jiuZhenManger/jiuZhenManger"),
                meta: { requiresAuth: true },
                beforeEnter: user_typeValidate('门诊医生'),
            },
            {
                path: '/advice', component: () => import("../components/medical/jiuZhenManger/addDoctorAdvice"),
                meta: { requiresAuth: true },
                beforeEnter: user_typeValidate('门诊医生'),
            },
            {
                path: '/view', component: () => import("../components/medical/jiuZhenManger/viewJiuZhen"),
                meta: { requiresAuth: true },
                beforeEnter: user_typeValidate('门诊医生'),
            },
        ],
    },
]
 
const routers = new Router({
    routes
});
 
// 全局前置守卫
// to当前即将要进入的路由对象
routers.beforeEach((to, from, next) => {
    //如果当前的访问的请求是Login放行
    if (to.path === '/Login') {
        console.log(to);
        console.log(to.path);
        next();
    }
    else {
        //其余访问请求判断用户是否登录
        if (!isLoggedIn()) {
            console.log(to);
            console.log(to.meta);
            console.log("抱歉你未登录");
            next({ path: '/Login' }); // 如果用户未登录，则重定向到登录页面
        } else {
            next();
        }
    }
})
//登录验证函数
function isLoggedIn() {
    console.log("进入路由守卫");
    // 在这里实现检查用户是否已登录的逻辑，例如检查是否有有效的令牌或会话
    // 如果已登录，返回true，否则返回false
    const user = sessionStorage.getItem('user'); // 从sessionStorage中获取会话信息
    return user !== null; // 如果会话信息存在，则用户已登录
}
 
// 用户类型身份验证 路由独享守卫函数
function user_typeValidate(requiredRole) {
    return (to, from, next) => {
        // 在进入该路由之前执行的逻辑，检查用户是否具有所需的用户类型
        if (localStorage.getItem("user_type") === requiredRole) {
            next(); // 放行，允许进入
        } else {
            next(false); // 表示阻止用户导航，保持在当前路由
        }
    };
}
 
// 到处vue路由表
export default routers;
 
 
// 防止连续点击多次路由报错
let routerPush = Router.prototype.push;
let routerReplace = Router.prototype.replace;
// push
Router.prototype.push = function push(location) {
    return routerPush.call(this, location).catch(err => err)
}
// replace
Router.prototype.replace = function push(location) {
    return routerReplace.call(this, location).catch(err => err)
}

其中函数 也可以写在文件里面 比如user_typeValidate(requiredRole)身份验证函数

步骤如下：

首先，创建一个名为 authGuard.js 的文件，用于定义可重用的路由独享守卫身份验证函数。如下

export function user_typeValidate(requiredRole) {
    return (to, from, next) => {
        // 在进入该路由之前执行的逻辑，检查用户是否具有所需的用户类型
        if (localStorage.getItem("user_type") === requiredRole) {
            next(); // 放行，允许进入
        } else {
            next(false); // 表示阻止用户导航，保持在当前路由
        }
    };
}

然后，在写路由表之前导入这个函数。例如：

import { user_typeValidate } from './authGuard.js'; // 导入守卫函数
 
const routes = [
  {
    path: "/index",
    component: () => import("../components/index"),
    children: [
      // 默认显示select_update_delete页面
      { path: '/', redirect: "/hello" },
      {
        path: "/hello",
        component: () => import("../components/hello"),
      },
      // 用户管理
      {
        path: "/s_u_d",
        component: () => import("../components/system/UserManger/select_update_delete"),
        meta: { requiresAuth: true },
        beforeEnter: user_typeValidate('系统管理员'), // 使用可重用的守卫函数
      },
      // ...其他路由配置
    ],
  },
];
 
export default routes;

在文件加入设置解决路由多次点击报错  

// 防止连续点击多次路由报错
let routerPush = Router.prototype.push;
let routerReplace = Router.prototype.replace;
// push
Router.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(err => err)
}
// replace
Router.prototype.replace = function push(location) {
  return routerReplace.call(this, location).catch(err => err)
}

在main.js引入

import Vue from 'vue'
import App from './App.vue'
import router from "@/router/router"
import element from 'element-ui';
import axios from 'axios'
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
// vue的原型对象
Vue.prototype.axios = axios
 
Vue.use(element)
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')