全局前置守卫与购物车页面鉴权

在很多应用里，并非所有页面都能随意访问。例如购物车页面，用户需先登录才能查看。这时可以利用全局前置守卫来实现这一鉴权功能。

全局前置守卫的书写位置在 router/index.js 文件中，在创建 router 对象之后，暴露 router 对象之前添加鉴权代码。

javascript

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Cart from '../views/Cart.vue';
import Login from '../views/Login.vue';const routes = [{path: '/',name: 'Home',component: Home},{path: '/cart',name: 'Cart',component: Cart},{path: '/login',name: 'Login',component: Login}
];const router = createRouter({history: createWebHistory(),routes
});// 全局前置守卫
router.beforeEach((to, from, next) => {const isLoggedIn = localStorage.getItem('isLoggedIn'); // 假设登录状态存储在 localStorage 中if (to.name === 'Cart' && !isLoggedIn) {next({ name: 'Login' });} else {next();}
});export default router;

在上述代码里，router.beforeEach 是全局前置守卫，每次路由切换前都会执行。若要访问购物车页面且用户未登录，就会跳转到登录页面；若已登录或者访问的不是购物车页面，就正常放行。