AI专业者开发社区 1 号成员
  •  0 回帖  •  45 浏览  •  5 个月前
 

vue之全局守卫

Vue 的路由守卫是什么东西呢？
第一次接触很懵逼，知道自己遇到了这样一个需求，
在页面之间进行路由跳转时，需要进行一个判断，如果下一个页面是需要登录后才能进入的页面，那么就需要在点击进入该页面的时候进行守卫的判断，判断用户是否登录，如果登录过了。就直接进入需要进入的页面，如果没有登录过，则进入登录页面。
那么问题来了，怎么知道登录过还是没有登录过呢？
在点击登录的时候，会请求后台的 api，这时，后台会返回一个 token 字段。我们需要将该字段存储到 storage 或者 cookie 中。然后在路由守卫中加入读取出来判断他是否存在久可以判断是否登录过。
一般我们选择存入 storage 中，因为 cookie 会在每次请求时，伴随发送。性能上没有 storage 好些。
下面是一个例子：
router.js
  1. import Vue from 'vue';
  2. import Router from 'vue-router';
  3. import LoginPage from '@/pages/login';
  4. import HomePage from '@/pages/home';
  5. import GoodsListPage from '@/pages/good-list';
  6. import GoodsDetailPage from '@/pages/good-detail';
  7. import CartPage from '@/pages/cart';
  8. import ProfilePage from '@/pages/profile';
  9.  
  10. Vue.use(Router)
  11.  
  12. const router = new Router({
  13.   routes: [
  14.     {
  15.       path: '/',  // 默认进入路由
  16.       redirect: '/home'   //重定向
  17.     },
  18.     {
  19.       path: '/login',
  20.       name: 'login',
  21.       component: LoginPage
  22.     },
  23.     {
  24.       path: '/home',
  25.       name: 'home',
  26.       component: HomePage
  27.     },
  28.     {
  29.       path: '/good-list',
  30.       name: 'good-list',
  31.       component: GoodsListPage
  32.     },
  33.     {
  34.       path: '/good-detail',
  35.       name: 'good-detail',
  36.       component: GoodsDetailPage
  37.     },
  38.     {
  39.       path: '/cart',
  40.       name: 'cart',
  41.       component: CartPage
  42.     },
  43.     {
  44.       path: '/profile',
  45.       name: 'profile',
  46.       component: ProfilePage
  47.     },
  48.     {
  49.       path: '*',   // 错误路由
  50.       redirect: '/home'   //重定向
  51.     },
  52.   ]
  53. });
  54.  
  55. // 全局路由守卫
  56. router.beforeEach((to, from, next) => {
  57.   console.log('navigation-guards');
  58.   // to: Route: 即将要进入的目标 路由对象
  59.   // from: Route: 当前导航正要离开的路由
  60.   //如果 next 为空则路由正常进行跳转，如果 next 不为空，则进行跳转时，会中断
  61.  
  62.   const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];
  63.   let isLogin = global.isLogin;  // 是否登录，一般从 storage 中读取
  64.   // 未登录状态；当路由到 nextRoute 指定页时，跳转至 login
  65.   if (nextRoute.indexOf(to.name) >= 0) {  
  66.     if (!isLogin) {
  67.       console.log('what fuck');
  68.       router.push({ name: 'login' })
  69.     }
  70.   }
  71.   // 已登录状态；当路由到 login 时，如果已经登录过，则跳转至 home
  72.   if (to.name === 'login') {
  73.     if (isLogin) {
  74.       router.push({ name: 'home' });
  75.     }
  76.   }
  77.   next();
  78. });
  79.  
  80. export default router;