网站首页> 前端开发> vue.js> vue中使用router全局守卫实现页面拦截的示例

vue中使用router全局守卫实现页面拦截的示例

时间:2020-10-24 10:34:54 阅读:4362次 来源:互联网

一、背景

在vue项目中使用vue-router做页面跳转时,路由的方式有两种,一种是静态路由,另一种是动态路由。而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截(安全问题文章最后讨论)

二、使用场景

静态路由的使用场景:在我们使用静态路由实现页面跳转时,不管我们是否登录,当我们在地址栏修改地址后,页面会发生跳转并展示页面内容(数据并不会被展示出来),这样的问题显然是不能够被接受的;

动态路由的使用场景:动态路由无非就是从后端拿到了数据然后在加到router里面了。假如用户登录了,在地址栏修改地址便能直接访问。所以动态路由并不能起到拦截作用。

三、解决方案

  • 使用vuex+router.beforeEach()+动态路由实现页面拦截

  • 页面刷新时会清楚vuex里面的值;(防止直接修改地址栏)

  • router.beforeEach()对跳转前进行拦截判断;(对vuex里面的值进行判断)

  • 当用户登录时请求后台拿到数据,加载路由.(跳转页面)

四、实现过程

1.首先定义vuex里面的值,需要定义两个值:

a.登录状态信息的值 loginInfo

b.存储动态路由的值 routerList

vue中使用router全局守卫实现页面拦截的示例

2.router.beforeEach()对路由跳转前进行控制 

//全局守卫
router.beforeEach((to, from, next)=> {
 let userId = store.state.loginInfo.id;
 //这里是对登录后的值进行判断,也可对token的值进行判断
 if (userId === '') {
  if (to.meta.requireAuth || to.name == null) {
  next({path: '/'})
  } else {
  next();
  }
 } else {
  //初始化动态路由方法
  initRouter(router, store); 
  next();
 }
 }
);

3.初始化动态路由

在全局守卫对应条件下加载动态路由数据routerList和在登录成功时存储登录成功的信息loginInfo

新建一个xxx.js文件 引入axios 创建一个函数并使用export 暴露该方法;

请求成功拿到数据后,把数据造成和routes里的数据一样。然后使用 router.addRoutes 添加进去;

index中的默认路由

vue中使用router全局守卫实现页面拦截的示例

import axios from 'axios'
export const initRouter = (router,store)=>{
 if (store.state.routerList.length > 0) {
 return;
 }
 axios.get(' URL')
  .then((rest)=>{
  let routerList = [];
  if(rest.data.success){
  let routers = rest.data.body;
  routers.forEach(router=>{
   let {
    path,
    component,
    name,
   } = router
   let routerObj = {
    path:path,
    name:name,
    component(resolve){
    if (component.startsWith("index")) {
     require(['../components/' + component + '.vue'], resolve)
    }  
    
    },
    meta:{requireAuth:true} //是否是登录权限控制
   };
   routerList.push(routerObj);
   });
  //add到router中
  router.addRoutes(routerList); 
  //存储到vuex中
  store.commit('routerList', routerList); 

  }else{
   console.log(rest.data.error);
  }
 }).catch((error)=>{
  console.log(error);
 })
}

4.登录成功后存储成功状态信息并跳转页面

vue中使用router全局守卫实现页面拦截的示例

至此,页面拦截功能已实现。

五、总结

该方法实现主要用到了:

  • vuex及页面刷新时会对vuex进行清空,所以比如退出时要对页面window.location.reload(),其它地方类似。

  • router.beforeEach()钩子函数及关键的router.addRoutes方法

  • es6的一些写法

以上就是vue中使用router全局守卫实现页面拦截的示例的详细内容。

本文地址:https://www.manongw.com/article/91.html

文章来源:转载于博客园,转载网址为https://www.cnblogs.com/xufeikko/p/10169826.html

版权申明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 ezhongheng@126.com 举报,一经查实,本站将立刻删除。

相关文章
  • 本文主要介绍了解决vue watch数据的方法被调用了两次的问题的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-08 09:37
  • 本文主要介绍了详解vue 中 scoped 样式作用域的规则的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 08:41
  • 本文主要介绍了vue实现动态给id赋值,点击事件获取当前点击的元素的id操作的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-10 09:19
  • 本文主要介绍了html+vue.js 实现漂亮分页功能可兼容IE的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-08 09:32
  • 本文主要介绍了解决Vue watch里调用方法的坑的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-08 09:11
  • 本文主要介绍了vue中使用腾讯云Im的示例的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-24 10:26
  • 本文主要介绍了vant 中van-list的用法说明的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-12 11:04
  • 本文主要介绍了Vue 列表页带参数进详情页的操作(router-link)的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-13 16:21
  • 本文主要介绍了vue.js页面加载执行created,mounted的先后顺序说明的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-09 09:57
  • 本文主要介绍了vue 如何从单页应用改造成多页应用的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-23 11:11