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')
  }
})

测试。

相关推荐
求知若渴,虚心若愚。9 分钟前
Error reading config file (/home/ansible.cfg): ‘ACTION_WARNINGS(default) = True
linux·前端·ansible
LinDaiuuj1 小时前
最新的前端技术和趋势(2025)
前端
paopaokaka_luck1 小时前
婚纱摄影管理系统(发送邮箱、腾讯地图API、物流API、webSocket实时聊天、协同过滤算法、Echarts图形化分析)
vue.js·spring boot·后端·websocket·算法·echarts
一只小风华~1 小时前
JavaScript 函数
开发语言·前端·javascript·ecmascript·web
程序猿阿伟2 小时前
《不只是接口:GraphQL与RESTful的本质差异》
前端·restful·graphql
仰望星空的凡人3 小时前
【JS逆向基础】数据库之MongoDB
javascript·数据库·python·mongodb
若梦plus4 小时前
Nuxt.js基础与进阶
前端·vue.js
樱花开了几轉4 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
风清云淡_A4 小时前
【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据
前端·react.js
小飞大王6664 小时前
React与Rudex的合奏
前端·react.js·前端框架