精华内容
下载资源
问答
  • 主要介绍了vue-router beforeEach跳转路由验证用户登录状态,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue-router中的beforeEach

    千次阅读 2020-09-02 14:31:15
    最近在做vue项目的开发,用到的技术栈主要是vue相关的,在开发这个项目的时候,设计到了权限,因为是后台管理系统,不同的身份和角色访问系统的时候,系统所展现出来的可访问内容都是不一样的,有兴趣的同学可以参考...

    最近在做vue项目的开发,用到的技术栈主要是vue相关的,在开发这个项目的时候,设计到了权限,因为是后台管理系统,不同的身份和角色访问系统的时候,系统所展现出来的可访问内容都是不一样的,有兴趣的同学可以参考下RBAC(以角色为基础的权限管理设计)这篇文章写得很详细,很直观,我写这篇文章主要是想要分享一下前端的技术栈vue-router是如何处理的,以及踩过的坑。

    • vue-router

    可以参考官方文档vue-router,官方文档中介绍的很详细,解决权限问题,就用到了addRoutes这个API,去动态添加路由,我项目目前使用的vue-router的版本号是3.0.1,我把我初始化创建路由实例的代码可以展示给你们看一下的:

    • 动态路由处理方式

    因为每次在进行路由跳转的时候,都会触发对应的钩子函数,可以参考官网的文档注解:

    本人在项目里面是运用了beforeEach这个钩子函数来监控路由的变化的,具体可以参看代码:

     

    • beforeEach实现的思路如下:

    每次通过vue-router进行页面跳转,都会触发beforeEach这个钩子函数,这个回调函数共有三个参数,to,from,next这三个参数,to表示我要跳转的目标路由对应的参数,from表示来自那个路由,就是操作路由跳转之前的,即将离开的路由对应的参数,next是一个回调函数,一定要调用next方法来resolve这个钩子函数;

    这里在使用beforeEach的时候,应该要注意,如果这个beforeEach函数没有合理利用的情况下,就会陷入到无限循环之中。看到的现象就是整个页面不停的刷新,其实从代码的角度来看是一致在进行路由跳转,也就是一致在不停的执行beforeEach这个函数。

    当在beforeEach这个函数中调用next({path:'/home'})的时候,会中断当前导航;比如当前导航是去/a,那么遇next({path:'/home'})之后,就会把to.path改成home,然后重新触发beforeEach这个钩子函数,注意是重新触发,而不是在当前这个钩子的函数的基础上去执行;之前因为对这一点理解的不透彻,以为只要是调用next({path:'/home'})就可以直接跳转到home了,但是没有像预期的那样,反而陷入到了无限循环之中;当重新触发以后,因为没有加上合理的判断条件,所以会一直循环。
    解决这个无限循环的办法就是加上一个判断,如果to.path===‘/home’,就执行next();这样子就不会无限循环了。

    可以看下代码示例:

     

    以上就是本人在本次写项目的时候踩过的坑,跟大家分享一下经验,喜欢的话,就点个赞吧!

     

     

     

    展开全文
  • 路由跳转的时候,我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。 定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的...1. router.beforeEach(function(to,form,next){}) /*在...

    在路由跳转的时候,我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。

    定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。

    总体来讲vue里面提供了三大类钩子,两种函数 1、全局钩子 2、某个路由的钩子 3、组件内钩子

    两种函数:
    
    1. router.beforeEach(function(to,form,next){}) /*在跳转之前执行*/
    
    2. router.afterEach(function(to,form)}{}) /*在跳转之后判断*/
    全局钩子函数

    顾名思义,它是对全局有效的一个函数

    // router.js

    const
    router = new Router({ routes: [ { path: '/', name: 'sideBar', component: sideBar, children:[ { path:'/', name:'sort', component:sort }, { path:'/addNewSort', name:'addNewSort', component:addNewSort }, { path:'/notSend', name:'notSend', component:notSend }, { path:'/sended', name:'sended', component:sended }, } ] }) router.beforeEach((to,from,next)=>{ // console.log("to:",to); // router即将进入的路由对象 // console.log("from:",from); // 当前导航即将离开的路由 // console.log("next:",next); // Function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的);否则为false,终止导航。 if(to.name=='notSend'){ next({ name:'sort' }) return } next() }) export default router
    某个路由的钩子函数

    顾名思义,它是写在某个路由里头的函数,本质上跟组件内函数没有区别。

    // router.js

    const
    router = new VueRouter({
      routes: [
        {
          path: '/login',
          component: Login,
          beforeEnter: (to, from, next) => {
            // ...
          },
          beforeLeave: (to, from, next) => {
            // ...
          }
        }
      ]
    })
    路由组件的钩子

    可以在路由组件内直接定义以下路由导航钩子

    // *.vue

    beforeRouteEnter beforeRouteUpdate (
    2.2 新增) beforeRouteLeave

    这里简单说下钩子函数的用法:它是和data,methods平级的。

    beforeRouteLeave(to, from, next) {
        next()
    },
    beforeRouteEnter(to, from, next) {
        next()
    },
    beforeRouteUpdate(to, from, next) { // 用于相同路由组件的的参数更新
        next()
    },
    data:{},
    method: {}

     

    转载于:https://www.cnblogs.com/xiaoyaoxingchen/p/9537174.html

    展开全文
  • import Vue from "vue"; import Router from "vue-router"; import store from '../store/store'; // 用到的vuex--store // 封装的路由引入进来 import nd from './nd'; import q from './q'; // 按钮权限 ...

    上代码吧
    在我们的router.js文件下

    	/*
    	 * @Description: 路由设置
    	 */
    	import Vue from "vue";
    	import Router from "vue-router";
    	import store from '../store/store';  // 用到的vuex--store
    	// 封装的路由引入进来
    	import nd from './nd';
    	import q from './q';
    	// 按钮权限
    	import {getCurrentModuleBtnPermission} from "../utils/btnPermission" // 按钮权限操作
    	
    	Vue.use(Router);
    	
    	//解决Vue-Router升级导致的没有捕获导航 Uncaught(in promise) navigation guard问题
    	
    	const originalPush = Router.prototype.push // 路由原型中的push
    	Router.prototype.push = function push(location, onResolve, onReject) {
    	  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
    	  return originalPush.call(this, location).catch(err => err)
    	}
    	
    	// 使用引入的路由
    	const routes = [
    		...nd, ...q, 
    		{
    		  path: "/",
    		  redirect: "login",
    		  auth: false
    		}
    	]
    	
    	const router = new Router({
    	  mode: 'history',
    	  routes
    	});
    	
    	// 路由拦截操作
    	router.beforeEach((to, from, next) => {
    		//判断是否需要登录
    	  if (to.matched.some(res => res.meta.auth)) { // 如果匹配到了信息就可以直接登录
    	    if (sessionStorage['username']) { // 如果有找到以存在的 username
    	    	// 权限btn
    	    	// some()是对数组中每一项运行给定函数,如果该函数有一项返回true,则返回true。
    	      if (to.matched.some(res => res.meta.btn)){
    	      		// 权限按钮操作
    	          getCurrentModuleBtnPermission(to.fullPath).then((res) => {
    		            if (res.code == "SUCCESS") {
    		              sessionStorage.setItem('btnPermission',res.data);
    		            }
    	          });
    	      }
    		// 提交一个commit 事件 
    	      store.commit('setHistory', to);
    	      next();
    	    } else {// 如果没有权限btn
    	      sessionStorage.clear(); // 清空 存储信息,进入登录页面
    	      next({
    	        path: "/login",
    	        query: {
    	          redirect: to.fullPath // 重定向
    	        }
    	      });
    	    }
    	  } else { // 如果没有匹配到信息
    	    store.commit('setHistory', to);
    	    next()
    	  }
    	})
    	export default router
    

    上面我们说道了权限,并且有路由里的meta标记,你一定要注意在我们路由配置里面添加meta , 并给值,如下图
    在这里插入图片描述

    然后继续。
    我们在store文件夹下创建一个store.js文件

    import Vue from 'vue'
    import Vuex from 'vuex'
    import { setToken } from '@/utils/storage.js'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
    	// 基本数据信息
        state: {
            id_token: '', //token
            Loading: false, // loading 控制
            index: localStorage.getItem('index') || 1, // 底部导航状态
            lang: 'cn', // 语言
            history: []
        },
    	//异步操作
        mutations: {
            SET_TOKEN(state, token) {
                state.id_token = token
            },
            isLoading(state) {
                state.Loading = !state.Loading;
            },
            isIndex(state, n) {
                localStorage.setItem('index', n);
                state.index = n;
            },
            setLang(state, lang) {
                localStorage.setItem('lang', lang);
                state.lang = lang;
            },
            
            setHistory(state, n) {
                // 过滤相同数据
                let arr = state.history;
                let isa = arr.filter(item => item.path == n.path);
                if (isa.length == 0) {
                    // 判断是否是欢迎页
                    if (n.path != '/welcome' && n.meta.name) {
                        state.history.push(n);
                    }
                }
            },
    
            reduceHistory(state, n) {
                // 删除记录
                let arr = state.history;
                let index;
                arr.forEach((item, i) => {
                    if (item.path == n.path) {
                        index = i;
                    }
                })
                arr.splice(index, 1);
            },
            allHistory(state) {
                // 关闭全部
                sessionStorage.removeItem('history');
                state.history = [];
            },
            otherHistory(state, n) {
                // 关闭其他
                if (state.history.length) {
                    state.history = [];
                    state.history.push(n);
                }
            }
        },
        
        // 同步操作
        actions: {
            setToken({ commit }, token) {
                return new Promise((resolve, reject) => {
                    commit('SET_TOKEN', token)
                    setToken(token)
                    resolve()
                })
            },
            editLoading(context) {
                context.commit('isLoading');
            },
            editIndex(context, n) {
                context.commit('isIndex', n);
            }
        }
    });
    
    
    export default store
    

    那么我们继续写按钮权限文件,要后端配合了

    import http from '../plugin/axios';
    
    let api = {
      btnPermission: '/gateway/energy-service-ucenter/api/roles/btn/permission', // 获取按钮权限
    }
    /**
     * 按钮权限判断
     * @param value
     * @returns {boolean}
     */
    	export function checkBtnPermission(value) {
    	   const permissions = sessionStorage.getItem('btnPermission')
    	    if(null == permissions){
    	       return false;
    	    }
    	    return permissions.indexOf(value) != -1
    	}
    
    export function getCurrentModuleBtnPermission(data) {
      return http.gets(api.btnPermission, {"path":data});
    }
    

    结束。

    展开全文
  • 主要介绍了Vue路由钩子 afterEach beforeEach区别 ,vue-router作为vue里面最基础的服务,学习一段时间,对遇到的需求进行一些总结。需要的朋友可以参考下
  • app.vue 页面写了一个跳转页面事件,之后每次刷新页面就会多走这个跳转事件一次,把这个跳转方法删除就ok了

    app.vue  页面写了一个跳转页面事件,之后每次刷新页面就会多走这个跳转事件一次,把这个跳转方法删除就ok了。

    一盏魂灯渡佳人,提灯锁净天下魂。 勾镰追心无处躲,无边幽冥留半生。

    展开全文
  • 主要包括beforeEach和aftrEach, beforeEach函数有三个参数: to:router即将进入的路由对象 from:当前导航即将离开的路由 next:Function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed (确认的...
  • 有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。(记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化,或使用beforeRouteUpdate的组件内守卫。)...
  • 1.代码问题再现: import Router from 'vue-router' const router = new Router({ {path: '/', component: home }, {path: '/login', component: login}, {path: '/error', ...router.beforeEach((to, from, next
  • router.beforeEach((to, from, next) => { var token = sessionStorage.getItem('token') if (!token) { next({ path: '/login' }) } else { next() } }) 正确写法 router.beforeEach((to, from, next) =...
  • } 可以理解为重定向到这个页面,并从url取到参数后分割参数给到重定向的url上main.js //路由跳转权限设置 router.beforeEach((to, from, next) => { NProgress.start(); Object.assign(to.meta, to.params, to....
  • * 配置路由格式: `/router/:id` * 传递的方式:在path后面加上对应的值 * 传递后形成的路径:` /router/123`, `/router/abc` 1.首先编写User.vue组件 2. App.vue 有一个router-link :to="'/user/'+userId",界面...
  • vue 路由守卫beforeEach

    2020-12-31 13:37:56
    router.beforeEach((to, from, next) => { console.log(store.state.token) // to: Route: 即将要进入的目标 路由对象 // from: Route: 当前导航正要离开的路由 // next: Function: 一定要调用该方法来 resolve 这个...
  • 在main.js中需要把组件挂载放在最下方。 new Vue({ el: '#app', router, store, // 使用Vuex template: '<App/>', components: { App } })
  • vue实例创建阶段 beforeCreate 实例未创建,不能获取this created 实例创建,可以访问this 可以获取数据赋值data DOM挂载阶段 beforeMount DOM未挂载 mounted DOM已挂载 数据更新阶段 beforeUpdate 数据...
  • 在优化vue路由时,设置路由拦截,...router.beforeEach((to, from, next) => { if(store.state.logined){ next(); }else { //没有登录,去跳转登录页 if(to.path === '/login'){ next(); }else { next({
  • 开发的哥们儿从网上找了一个简单的框架,通过auth的...首先在路由中需要指定登录的页面,这个是不分权限的,因此可以用硬编码的方式写入 const constantRoutes = [ { path: '/login', component: () => import
  • vue 路由拦截器 beforeEach和afterEach

    千次阅读 2018-07-07 10:43:59
    beforeEach函数 router.beforeEach((to, from, next) =&amp;gt; { // do something; /* must call `next` */ next(); }); to:router即将进入的路由对象 from:当前即将离开的路由 n...
  • 一般前端做的话放到sessionStorage里面,通过vuex去管理,直接上代码...router.beforeEach((to, from, next) =&gt; { if (to.path === '/' &amp;&amp; sessionStorage.getItem('accessToken') &amp...
  • 今天遇到个问题,刷新页面没触发 router.beforeEach 一直以为是自己的 router.beforeEach 没做好判断,但是查阅了很多资料,都是正常的 router.beforeEach((to,from,next)=>{ let token = localStorage.getItem...
  • vue-router作为vue里面最基础的服务,学习一段时间,对遇到的需求进行一些总结使用vue-cli作为开发前提 vue-router已经配置好了路由写法routes: [{path: '/cart',name: 'cart',component: cart,meta :{ title: ...
  • 在一些页面需要验证是否登录的时候, 就可以使用路由拦截beforeEach 创建一个Login.vue组件用来拦截后跳转到login页面 Login.vue 内容如下 <template> <div> login <!-- localStorage.setItem('...
  • vue router.beforeEach(),详解

    万次阅读 多人点赞 2019-02-28 11:55:17
    router.beforeEach()一般用来做一些进入页面的限制。比如没有登录,就不能进入某些页面,只有登录了之后才有权限查看某些页面。。。说白了就是路由拦截。 第一步 规定进入路由需不需要权限 @/router/index.js ...
  • 在项目登录之前需要登录,根据用户登录信息进行判断需要跳转到所设置的路由,通过Vue-router提供的beforeEach属性就可以实现这个功能,通过一段代码来看看是如何实现这个功能的: 使用 router.beforeEach 注册一个...
  • VuebeforeEach非登录不能访问的实现(代码亲测)后台的php请求就是接收这两个参数login.vue提交import axios from 'axios';export default {data(){return{name:'',password:'',}},methods:{submitForm:function(){...
  • vuebeforeEach中的next踩坑记录

    千次阅读 2019-06-30 00:17:04
    ue的beforeEach中的next踩坑记录 // 这里是定义一些,router方面的请求, import router from "./router" router.beforeEach((to,from,next)=>{ // 上面三个参数就是,to代表的是,即将要去的路由,from代表...
  • 在守卫导航中添加参数,在路由跳转时会出现下面问题。 Redirected when going from “/a” to “/b” via a ...router.beforeEach((to, from, next) => { // 修改标题 if (to.meta.title) { document.title = to
  • vue Router 路由守卫之beforeEach

    万次阅读 2018-06-07 11:48:39
    你可以使用 router.beforeEach 注册一个全局前置守卫:const router = new VueRouter({ ... }) router.beforeEach((to, from, next) =&gt; { // ... }) 当一个导航触发时,全局前置守卫按照创建顺序调用。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,443
精华内容 5,777
关键字:

vue路由beforeeach

vue 订阅