邢台网络公司网站建设,ppt制作模板与素材免费下载,重庆石柱网站设计公司,租房需求#xff1a;在使用商城app的时候#xff0c;游客#xff08;没有登录的用户#xff09;可以看到商品信息#xff0c;当游客点击添加购物车的时候#xff0c;我们需要把游客“拦”到登录页面#xff0c;登陆后#xff0c;才可以添加商品。
游客只可以看得到部分页面…需求在使用商城app的时候游客没有登录的用户可以看到商品信息当游客点击添加购物车的时候我们需要把游客“拦”到登录页面登陆后才可以添加商品。
游客只可以看得到部分页面。vue提供了全局前置守卫我们可以轻松解决这个问题。 页面访问拦截目标 基于全局前置守卫,进行页面访问拦截处理。 由导航守卫-全局前置守卫 1.所有的路由一旦被匹配到,都会先经过全局前置守卫。 2.只有全局前置守卫放行,才会真正解析渲染组件,才能看到页面。 在router目录下的index.js:
// 所有的路由在真正被访问到之前(解析渲染对应组件页面前)都会先经过全局前置守卫
// 只有全局前置守卫放行了才会到达对应的页面// 全局前置导航守卫
// 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}// 是权限页面需要判断tokenconst token store.getters.tokenif (token) {next()} else {next(/login)}
}) 测试。
