vue中关于router.beforeEach()的用法

 更新时间:2023年11月16日 17:06:19   作者:都挺好,刚刚好  
这篇文章主要介绍了vue中关于router.beforeEach()的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

router.beforeEach()用法

导航守卫 主要是通过跳转或取消得方式守卫导航

在前端路由跳转中,路由跳转前都是会经过beforeEach,而beforeEach可以通过next来控制到底去哪个路由。

根据这个特性我们就可以在beforeEach中设置一些条件来控制路由的重定向。

常见的使用场景有

1、验证用户是否登录(若未登录,且当前非登录页面,则自动重定向登录页面);

2、用户权限;

3、用户输入的路路径是否存在,不存在的情况下如何处理,重定向到哪个页面。

此处呢我使用一个简单的例子

当用户输入的路径不存在的情况下,将其重定向到‘/’路径来说明beforeEach是如何控制路由的。

话不多说,直接看下边如何实现的(这里我以创建一个名为router-be的项目为例)。

第一步 : 规定进入路由是否需要权限

@/router/index.js

import A from '@/components/a'
{
	path : '/a',
	name : 'a',
	component : A,
	meta : {  // 加一个自定义obj
		requireAuth : true   // 参数 true 代表需要登陆才能进入 A
	}
}

第二步 : 使用vuex 整一个useid

@/assets/store.js

//使用vuex三步走
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//这个理论来说
const store = new Vuex.Store({
	state:{
		userId : ''
	}
})

export default store

第三步 : 使用router.beforeEach()

思路:【
	如果(进入这个路由需要权限){
	
		如果(能获取到这个用户的userID){
			就让这个用户进入这个路由
		}否则{
			就让这个用户进入b这个页面
		}
		
	} 即将进入的路由不需要权限就能进入 {
	
		就让这个用户进入这个路由
		
	}
】
对应代码:
import store from '@/assets/store'   //把这个userId获取过来
router.beforeEach((to,from,next)=>{
	if(to.meta.requireAuth){
		if(store.state.userId){
			next()
		}else{
			next({path:'/b'})
		}
	}else{
		next()
	}
})

实现原理

 constrouter=newVueRouter({…})
 router.beforeEach((to,from,next)=>{// …})

 每个守卫方法接受三个参数 :

  • 1.to => route : 即将进入的目标路由对象
  • 2.from => route : 当前导航正要离开的路由
  • 3.next => function: 一定要调用该方法来 resolve这个钩子,执行效果以来 next 方法的调用参数

第四步

  • 上一步 /b 路由为 登陆页面
  • 当进入A 页面之前,需要先请求接口,获取是否有登录,然后把userId存在vuex 的state 中
  • 当没有userId 时,则在登录之后,存一个userId 到state 里

第五步 项目中使用

router.beforeEach((to, from, next) => {
  console.log(to);

  // DEBUG: 测试
  return next();

  const { ldomain } = to.query;
  if (ldomain) {
    document.domain = ldomain;
  }

  const { LoginPage } = byskConfig;

  if (!router.getMatchedComponents(to.path).length) {
    console.log("not page", to, from);
    return next(byskConfig.NotFoundPage.path);
  }

  //验证权限
  if (to.meta.permId && !hasPerms(to.meta.permId)) {
    console.log("no auth", to, from);
    return next(LoginPage.path);
  }

  //验证是否登录
  if (to.meta.permId && !getCookie("sid")) {
    console.log("no login & signout", to, from);
    return next(LoginPage.path);
  }

  if (to.matched.length) {
    let parentRoute = to.matched[to.matched.length - 1].parent;
    if (
      parentRoute &&
      parentRoute.meta.hasOwnProperty("redirect") &&
      parentRoute.meta.redirect !== to.path) {
      parentRoute.meta.redirect = to.path;
    }
  }
  next();
});

权限

export function setupPermissionGuard(router) {
  router.beforeEach(async (to, from, next) => {
    const { state, commit, dispatch } = store;
    // TODO: 404 的处理

    // 不需要登录,可访问
    if (to.meta.ignoreAuth === true) {
      next();
      return;
    }

    // TODO: 白名单

    // 刷新重新登录
    if (!state.appToken) {
      await dispatch('relogin');
    }

    // 处理token
    const hasToken = !!state.appToken;

    if (!hasToken) { // 未登陆,或过期
      // 重定向到登录页
      const redirectData = {
        path: LOGIN_PATH,
        replace: true,
      };

      next(redirectData);
      return;
    }

    // 判断是否有权限
    const hasAuthority = to.meta.permId && hasPerms(to.meta.permId);

    if (hasAuthority) { // 权限验证
      if (to.meta.ignoreKeepAlive !== true) {
        // 页面需要缓存, 添加到缓存
        const { cachePages } = state;
        const { matched } = to;
        commit('setCachePages', [...cachePages, ...matched.slice(1)]);
      }

      next();
      return;
    }
    next(from.path);

    // next();
  });

  router.afterEach((to) => {
    if (to.meta?.label) {
      // 设置页面`title`
      document.title = `一立科技 - ${to.meta.label}`;
    }
  });
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue使用vue-draggable 插件在不同列表之间拖拽功能

    Vue使用vue-draggable 插件在不同列表之间拖拽功能

    这篇文章主要介绍了使用vue-draggable 插件在不同列表之间拖拽,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • vue async await promise等待异步接口执行完毕再进行下步操作教程

    vue async await promise等待异步接口执行完毕再进行下步操作教程

    在Vue中可以使用异步函数和await关键字来控制上一步执行完再执行下一步,这篇文章主要给大家介绍了关于vue async await promise等待异步接口执行完毕再进行下步操作的相关资料,需要的朋友可以参考下
    2023-12-12
  • Vue3+TypeScript集成Mock的方法

    Vue3+TypeScript集成Mock的方法

    这篇文章主要介绍了Vue3+TypeScript集成Mock的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2025-04-04
  • Vuejs监听vuex中值的变化的方法示例

    Vuejs监听vuex中值的变化的方法示例

    这篇文章主要介绍了Vuejs监听vuex中值的变化的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue组件中点击按钮后修改输入框的状态实例代码

    vue组件中点击按钮后修改输入框的状态实例代码

    要求点击修改按钮之后部分输入框由禁用状态变为可用状态。下面我给大家分享一段实例代码基于vue组件中点击按钮后修改输入框的状态,需要的的朋友参考下
    2017-04-04
  • Vue全局loading及错误提示的思路与实现

    Vue全局loading及错误提示的思路与实现

    这篇文章主要给大家介绍了关于Vue全局loading及错误提示的思路与实现方法,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • Vue模仿实现京东商品大图放大镜效果

    Vue模仿实现京东商品大图放大镜效果

    这篇文章主要为大家介绍了Vue实现京东网站商品放大镜效果示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • vue中三种不同插槽使用小结

    vue中三种不同插槽使用小结

    本文主要介绍了vue中三种不同插槽使用小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vue .js绑定checkbox并获取、改变选中状态的实例

    vue .js绑定checkbox并获取、改变选中状态的实例

    今天小编就为大家分享一篇vue .js绑定checkbox并获取、改变选中状态的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue中的计算属性与监听属性

    Vue中的计算属性与监听属性

    这篇文章介绍了Vue中的计算属性与监听属性,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03

最新评论