vue中 router.beforeEach() 的用法

这篇具有很好参考价值的文章主要介绍了vue中 router.beforeEach() 的用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

  1. 在前端路由跳转中,路由跳转前都是会经过beforeEach,而beforeEach可以通过next来控制到底去哪个路由。
  2. 根据这个特性我们就可以在beforeEach中设置一些条件来控制路由的重定向。

常见的使用场景有:

  1. 1、验证用户是否登录(若未登录,且当前非登录页面,则自动重定向登录页面);
  2. 2、用户权限;
  3. 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()
	}
})

实现原理

  1. constrouter=newVueRouter({…})
  2. router.beforeEach((to,from,next)=>{// …})
  3. 每个守卫方法接受三个参数 :

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

第四步

  1. 上一步 /b 路由为 登陆页面
  2. 当进入A 页面之前,需要先请求接口,获取是否有登录,然后把userId存在vuex 的state 中
  3. 当没有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}`;
    }
  });
}

router.beforeeach,vue-router,vue.js,javascript,前端
router.beforeeach,vue-router,vue.js,javascript,前端文章来源地址https://www.toymoban.com/news/detail-830502.html

到了这里,关于vue中 router.beforeEach() 的用法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue-router.esm.js?a12b:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation

    vue-router.esm.js?a12b:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: \\\"/home\\\".   报错原因:重复点击路由导致,因为vue-router引入了promise,当我们使用this.$router.push时候需要多添加成功或失败的回调,否则就会报出以上的错误。 原代码 第一种         在进

    2023年04月08日
    浏览(132)
  • Uncaught SyntaxError: The requested module ‘/node_modules/.vite/deps/vue-router.js?v=9eef87ba‘

    错误代码 错误提示 浏览器中路由无法显示,提示错误 问题描述 解决方法

    2024年02月05日
    浏览(57)
  • vue-router3.x和vue-router4.x相互影响的问题记录

    项目中有一个系统使用的微前端,主站使用是 vue2 实现的,使用的是 vue-router3.x 。子应用有使用 vue3 实现的,使用的为 vue-router4.x 。 该子应用中的页面A有通过操作按钮触发跳转到其他子应用页面B的需求,此时使用的是 vue-router4.x 的编程式导航API。 当通过点击主站的Tab切换回

    2023年04月26日
    浏览(40)
  • 路由vue-router

    路由(英文:router)就是 对应关系 SPA 指的是一个 web 网站只有 唯一的一个 HTML 页面 ,所有组件的展示与切换都在这唯一的一个页面内完成。 此时,不同组件之间的切换需要通过前端路由来实现。 结论: 在 SPA 项目中,不同功能之间的切换 ,要依赖于 前端路由 来完成!

    2024年02月07日
    浏览(43)
  • vue-router笔记

    目的:为了实现SPA(单页面应用) vue-router是一个插件库 安装: 路由的配置路径:/src/router/index.js 路由组件的目录:/src/pages/ 一般组件的目录:/src/components/ 使用: main.js: App.vue: About.vue: 不可见的路由组件在哪?        被销毁了 嵌套路由的案例: 路由传参: query: 传参

    2024年02月12日
    浏览(51)
  • 【Vue-Router】别名

    后台返回来的路径名不合理,但多个项目在使用中了,不方便改时可以使用别名。可以有多个或一个。 First.vue Second.vue , Third.vue 代码同理 UserSettings.vue index.ts App.vue

    2024年02月12日
    浏览(42)
  • 【Vue-Router】路由入门

    路由(Routing)是指确定网站或应用程序中特定页面的方式。在Web开发中,路由用于根据URL的不同部分来确定应用程序中应该显示哪个内容。 构建前端项目 安装依赖和路由 3. router 使用 login.vue reg.vue index.ts App.vue main.ts router-view 补充: router-view 是Vue Router提供的一个组件,用于

    2024年02月13日
    浏览(39)
  • Vue-Router基本使用

    1 安装: vue2项目要安装vue-router@3版本 npm i vue-router@3 2 src下创建router目录,router文件夹下创建index.js 在vue.config.js中 配置src路径别名  3 在main.js中引入 4 在app.vue中配置  5 即可看到内容    

    2024年02月15日
    浏览(35)
  • 【Vue-Router】命名视图

    同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar (侧导航) 和 main (主内容) 两个视图,这个时候命名视图就派上用场了。 可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。 如果 router-view 没有设置名字,那么默认为 default。一个视

    2024年02月13日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包