vue vue-router实现路由拦截功能

1、目录结构

2、设置路由拦截、

路由配置如下，在这里自定义了一个对象的参数meta: {authRequired: true}来标记哪些路由是需要登录验证的，导航被触发的时候只要判断是否目标路由中是否有meta这个对象，且meta包含authRequired属性，其值为true。这里访问带有meta对象的路由是被拦截的。

 {path: '/config',name: 'config',meta: { requireAuth: true},component: Config},{path: '/about1',name: 'about1',meta: { requireAuth: true},component: About1},{path: '/app',name: 'app',component: App},{path: '/application',name: 'application',meta: { requireAuth: true},component: Application},

3、全局函数beforeEach

main.js通过router.beforeEach全局函数，每次路由跳转都会出发函数判断是否有登录信息

router.beforeEach((to, from, next) => {if (to.matched.some(res => res.meta.requireAuth)) { // 验证是否需要登陆var id=window.sessionStorage.getItem('userId');console.log(id)if (id) { // 查询本地存储信息是否已经登陆next();} else {next({path: '/login', // 未登录则跳转至login页面redirect:  '/main2' // 登陆成功后回到当前页面，这里传值给login页面，to.fullPath为当前点击的页面});}} else {next();}
}

4、在登陆界面利用sessionStorage将信息存入到全局变量

  login() {axios.get('http://192.168.56.1:8081/sel/1', {// /gr/goods/adduserid: this.loginForm.userid,pwd: this.loginForm.pwd,}).then((res) => {console.log(res);console.log(res.data.msg);this.$store.commit('setUserId',this.loginForm.userid);this.$store.commit('setUserPwd',this.loginForm.pwd);console.log(this.loginForm.userid);console.log(this.loginForm.userpwd);console.log("打印的id为："+sessionStorage.getItem('userId'));console.log("打印的pwd为："+sessionStorage.getItem('userPwd'));

注意：

之后每次进行路由的时候都会判断登录信息，在注销的时候调用函数，；利用sessionStroage.clear()将全局信息清楚。防止注销之后路由拦截失效

vue vue-router实现路由拦截功能相关推荐

uniapp通过uni.addInterceptor实现路由拦截功能
扒了插件市场的uni-start,抽出来的简单的路由拦截功能. 项目结构 |--|-- App.vue|-- index.html|-- main.js|-- manifest.json|-- pag ...
四十三、在Vue使用router，路由的管理
@Author:Runsen @Date:2020/7/17 管理路由是一项必不可少的功能.今天,Runsen学习Vue Router. 文章目录安装Vue Router Vue Router使用 ...
2020用vue实现仿美团导航切换功能和淘宝购物车功能，实现默认第一个导航显示效果?
总结:之前一直未写过同时实现跳转当前页面和跳转新页面的项目,要么是当前,要么是新页面,今天更新一个两个同时实现的项目. :相信很多人都遇到过router-link通过to跳转页面有时候会不显示内容的b ...
react实现路由跳转拦截功能（导航守卫）
react实现路由跳转拦截功能(导航守卫) 背景方法1:通过Prompt组件实现react路由跳转拦截功能 Prompt组件介绍 Prompt组件示例自定义Prompt组件的提示弹窗方法2:通过 ...
Vue+axios（interceptors）实现http拦截 + router路由拦截 (双拦截)+ 请求自带loading效果...
axios interceptors 拦截器 //interceptors.js// vue axios配置发起请求加载loading请求结束关闭loading // http request 请求 ...
Vue Router路由常用功能总结
Vue Router路由常用功能总结一.前言二.安装 1. vueCLI安装 2. npm安装三.路由配置及使用: 1. 基本配置: 2. 动态路由: 3. 嵌套路由: 四.编程式的导航五.重 ...
vue 定义全局弹框_VUE路由拦截：Vue自定义全局弹窗组件
前言在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等. 抛出前后端混合开发外,vue可以轻松的实现路由拦截. ...
VUE 路径拦截, 开放页面, 基于动态路由, 拦截器
vue 动态路由参考 https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html main.js 只会加载一次, 我们在mia ...
Vue.js-Day05【安装路由（vue-router）、如何使用vue-router、404配置、激活class、动态路由、编程式导航、路由嵌套、路由元信息、导航拦截】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.单页面应用 1.1.多页面应用 1.2.单页面应用 1.3.vue-router 2.安装vue-rout ...

vue vue-router实现路由拦截功能

vue vue-router实现路由拦截功能

1、目录结构

2、设置路由拦截、

3、全局函数beforeEach

4、在登陆界面利用sessionStorage将信息存入到全局变量

注意：

vue vue-router实现路由拦截功能相关推荐

最新文章

热门文章