湖南省住房和城乡建设网站,深圳工业设计机构,宁金诚信建设网站,wordpress the7下载1. 介绍
详见#xff1a;全局前置守卫网址
使用场景#xff1a;
对于支付页#xff0c;订单页等#xff0c;必须是登录的用户才能访问的#xff0c;游客不能进入该页面#xff0c;需要做拦截处理#xff0c;跳转到登录页面
全局前置守卫的原理#xff1a;
全局前置…1. 介绍
详见全局前置守卫网址
使用场景
对于支付页订单页等必须是登录的用户才能访问的游客不能进入该页面需要做拦截处理跳转到登录页面
全局前置守卫的原理
全局前置守卫是一种路由守卫它在路由被访问之前进行拦截。它允许我们在路由被访问之前进行一些处理例如权限验证、请求参数预处理等。在Vue Router中我们可以通过在路由配置中添加beforeEnter守卫来实现全局前置守卫。
如图
2. 配置全局前置守卫规则
在 src/router/index.js 文件夹中 添加配置
// 创建一个数组用来存放需要用户登录的页面路径
const authUrl [/pay, /myorder]
// 创建全局前置守卫
router.beforeEach((to, from, next) {// 判断是否为权限页面if (!authUrl.includes(to.path)) { // 非权限页面直接放行next()} else {const token store.getters.token// console.log(token)if (token) {next()} else {next(/login)}}
})注 to 往哪里去 到哪去的路由信息对象from 从哪里来 从哪来的路由信息对象next() 是否放行如果next()调用就是放行next(路径) 拦截到某个路径页面 完整代码
import Vue from vue
import VueRouter from vue-routerimport Home from /views/layout/home
import User from /views/layout/user
import Cart from /views/layout/cart
import Category from /views/layout/categoryimport store from /storeconst Login () import(/views/login)
const Layout () import(/views/layout)
const Search () import(/views/search)
const SearchList () import(/views/search/list)
const ProDetail () import(/views/prodetail)
const Pay () import(/views/pay)
const MyOrder () import(/views/myorder)Vue.use(VueRouter)const router new VueRouter({routes: [{path: /,component: Layout,redirect: /home,children: [{path: /home,component: Home},{path: /user,component: User},{path: /cart,component: Cart},{path: /category,component: Category}]},{path: /login,component: Login},{path: /search,component: Search},{path: /searchlist,component: SearchList},{path: /prodetail/:id,component: ProDetail},{path: /pay,component: Pay},{path: /myorder,component: MyOrder}]
})// 创建一个数组用来存放需要用户登录的页面路径
const authUrl [/pay, /myorder]
// 创建全局前置守卫
router.beforeEach((to, from, next) {// 判断是否为权限页面if (!authUrl.includes(to.path)) { // 非权限页面直接放行next()} else {const token store.getters.token// console.log(token)if (token) {next()} else {next(/login)}}
})export default router
