以及配置全局前置路由守卫和路由独享守卫
//路由配置文件 //作用是将指定的路由地址切换成对应的模块 // 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)
}
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')