54 - 综合案例 - 智慧商城-06 -全局前置导航守卫

一. 页面访问拦截

目标:基于全局前置守卫，进行页面访问拦截处理

说明: 智慧商城项目，大部分页面，游客都可以直接访问，如遇到需要登录才能进行的操作，提示并跳转到登录

但是:对于支付页，订单页等，必须是登录的用户才能访问的，游客不能进入该页面，需要做拦截处理

1. 路由导航守卫-全局前置守卫

        (1). 所有的路由一旦被匹配到，都会先经过全局前置守卫
        (2). 只有全局前置守卫放行，才会真正解析渲染组件，才能看到页面内容

        访问权限页面时，拦截或放行的关键点? -> 用户是否有登录权证 token

router.beforeEach((to, from, next) => {
    // 1. to 往哪里去, 到哪去的路由信息对象
    // 2. from 从哪里来,从哪来的路由信息对象
    // 3. next() 是否放行
    //    如果next()调用,就是放行 
    //    next(路径) 拦截到某个路径页面
})

2. 封装全局token

        store / index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'

Vue.use(Vuex)

export default new Vuex.Store({

  getters: {
    // 配置全局的token
    token (state) {
      return state.user.userInfo.token
    }
  },

  modules: {
    user
  }
})

3. 添加路由导航

        router / index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

// import Login from '@/views/login/index.vue'
// 直接导入login文件,会自动找到index.vue
import Login from '@/views/login'
import Layout from '@/views/layout'
import Search from '@/views/search'
import SearchList from '@/views/search/list'
import ProDetail from '@/views/prodetail'
import Pay from '@/views/pay'
import MyOrder from '@/views/myorder'

import Home from '@/views/layout/home'
import Caregory from '@/views/layout/category'
import Cart from '@/views/layout/cart'
import User from '@/views/layout/user'
import store from '@/store'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/login', component: Login },
    {
      path: '/',
      component: Layout,
      redirect: '/home', // 重定向
      // 二级路由
      children: [
        { path: '/home', component: Home },
        { path: '/category', component: Caregory },
        { path: '/cart', component: Cart },
        { path: '/user', component: User }

      ]
    },
    { path: '/search', component: Search },
    { path: '/searchlist', component: SearchList },
    // 动态路由传参,确认将来是哪个商品,路由参数中携带id
    { path: '/prodetail/:id', component: ProDetail },
    { path: '/pay', component: Pay },
    { path: '/myorder', component: MyOrder }
  ]
})

// 所有的路由在真正被访问到之前(解析渲染对应组件页面前),都会先经过全局前置守卫
// 只有全局前置守卫放行了,才会到达对应的页面

// 全局前置导航守卫
// to: 到哪里去,到哪去的完整路由信息对象(路径,参数)
// from: 从哪里来,从哪来的完整路径信息对象(路径,参数)
// next(): 是否放行
//  (1). next() 直接放行,放行到to要去的路径
//  (2). next(路径) 进行拦截,拦截到next里面配置的路径

// 定义一个数组,专门用于存放所有需要权限访问的页面
const authUrls = ['/pay', '/myorder']

router.beforeEach((to, from, next) => {
  // console.log(to, from, next)
  // 看 to.path 是否在 authUrls 中出现过
  if (!authUrls.includes(to.path)) {
    // 非权限页面,直接放行
    next()
    return
  }

  // 是权限页面,需要判断token
  const token = store.getters.token
  if (token) {
    next()
  } else {
    next('/login')
  }
})

export default router