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

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

全局前置守卫的书写位置在 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 是全局前置守卫，每次路由切换前都会执行。若要访问购物车页面且用户未登录，就会跳转到登录页面；若已登录或者访问的不是购物车页面，就正常放行。