智慧商城项目2(vue核心技术与实战)

2024/12/22 9:32:50 来源：https://blog.csdn.net/m0_67307574/article/details/144404557 浏览: 次关键词：智慧商城项目2(vue核心技术与实战)

页面访问拦截了解

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
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 Category from '@/views/layout/category'
import Cart from '@/views/layout/cart'
import User from '@/views/layout/user'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: Category },{ 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里面配置的路径
router.beforeEach((to, from, next) => {console.log(to, from, next)next()
})export default router

页面访问拦截

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
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 Category from '@/views/layout/category'
import Cart from '@/views/layout/cart'
import User from '@/views/layout/user'import store from '@/store/index'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: Category },{ 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}next()// 是权限页面，需要判断token// const token = store.state.user.userInfo.tokenconst token = store.getters.tokenif (token) {next()console.log(token)} else {next('/login')}
})
export default router