vue、全局前置守卫

需求:在使用商城app的时候,游客(没有登录的用户)可以看到商品信息,当游客点击添加购物车的时候,我们需要把游客"拦"到登录页面,登陆后,才可以添加商品。

游客只可以看得到部分页面。vue提供了全局前置守卫,我们可以轻松解决这个问题。

页面访问拦截目标:

基于全局前置守卫,进行页面访问拦截处理。

由导航守卫-全局前置守卫

1.所有的路由一旦被匹配到,都会先经过全局前置守卫。

2.只有全局前置守卫放行,才会真正解析渲染组件,才能看到页面。

在router目录下的index.js:

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

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

// 定义一个数组,专门用户存放所有需要权限访问的页面
const authUrls = ['/payment', '/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')
  }
})

测试。

相关推荐
徐小夕11 分钟前
花了4个月时间,我写了一款支持AI的协同Word文档编辑器
前端·vue.js·后端
岁月向前1 小时前
小组件获取主App数据的几种方案
前端
用户47949283569151 小时前
TypeScript 和 JavaScript 的 'use strict' 有啥不同
前端·javascript·typescript
恒创科技HK2 小时前
香港服务器速度快慢受何影响?
运维·服务器·前端
bubiyoushang8882 小时前
MATLAB实现直流电法和大地电磁法的一维正演计算
前端·javascript·matlab
Mintopia2 小时前
🧠 AIGC模型的增量训练技术:Web应用如何低成本迭代能力?
前端·javascript·aigc
Mintopia2 小时前
🧩 Next.js在国内环境的登录机制设计:科学、务实、又带点“国风味”的安全艺术
前端·javascript·全栈
paopaokaka_luck2 小时前
基于SpringBoot+Vue的少儿编程培训机构管理系(WebSocket及时通讯、协同过滤算法、Echarts图形化分析)
java·vue.js·spring boot·后端·spring
雨过天晴而后无语2 小时前
Windchill中MVC选中事件级联另一MVC内容
java·javascript·html·mvc
qq. 28040339842 小时前
react hooks
前端·javascript·react.js