vue全局前置守卫控制访问权限

最新推荐文章于 2024-04-26 10:02:08 发布
最新推荐文章于 2024-04-26 10:02:08 发布
阅读量390 收藏 1
点赞数
分类专栏： js vue权限控制 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37312180/article/details/129384437
版权

1.配置路由

路由配置中添加，如下配置：

 meta:{

    requiresAuth:true,

    title:"Vip"

  }

requiresAuth表示是否需要访问权限，值为true，需要访问权限，值为false,不需要访问权限。title为标题。

 

/**
 * Модуль роутера приложения
 */

import Vue from 'vue';
import VueRouter from 'vue-router';
import initListners from './initListners';
import listners from './listners';

Vue.use(VueRouter)

const routes = [{
  path: '/vip',
  name: 'vip',
  component: () => import('../views/VipView.vue'),
  meta:{
    requiresAuth:true,
    title:"Vip"
  }
},
{
  path: '/home',
  name: 'home',
  component: () => import('../views/HomeView.vue'),
  meta:{
    requiresAuth:false,
    title:"Home"
  }
},
{
  path: '/about',
  name: 'about',
  component: () => import('../views/AboutView.vue'),
  meta:{
    requiresAuth:false,
    title:"About"
  }
  
},{
  path: '/404',
  name: '404',
  component: () => import('../views/ErrorView.vue'),
  meta:{
    requiresAuth:false,
    title:"404"
  }
}];

const router = new VueRouter({
 // mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default initListners(router, listners);

 2.权限控制

按目录src/routerbeforeeach/index.js 新建文件夹或文件

 

import router from '@/router'
import sha1 from 'js-sha1'
/* *******************导航守卫******************* */
let queryURLParams = (URL) => {
  let obj = {}; // 声明参数对象
  if (URL.includes("?")) {
    // const url = location.search; // 项目中可直接通过search方法获取url中"?"符后的字串
    let url = URL.split("?")[1];
    let arr = url.split("&"); // 以&符号分割为数组
    for (let i = 0; i < arr.length; i++) {
      let arrNew = arr[i].split("="); // 以"="分割为数组
      obj[arrNew[0]] = decodeURIComponent(arrNew[1]);
    }
  } else {
    obj = {
      VODACC: "",
      STAMP: null,
      SSOKEY: null,
    }
  }
  return obj;
}
let URL = window.location.href //"http://192.168.1.183:8080/#/vip?SSOKEY=ad1b8114fc8702169244e1c9e60358e618f29aef&STAMP=31558673374&VODACC=vz"// 
console.log(queryURLParams(URL))
let queryURLParamsObj = queryURLParams(URL)
/*取 VODACC 1、用户名*/
let VODACC = queryURLParamsObj.VODACC
/*取 STAMP ,登录时间戳（精确到秒）,时间戳验证，时间戳超过5分钟则判定过期,限制登录*/
let STAMP = queryURLParamsObj.STAMP//Date.parse(new Date()) - 60//;
/*取 SSOKEY SHA1(链接秘钥+loginid+stamp)的值等于token，即视为合法*/
let SSOKEY = queryURLParamsObj.SSOKEY;
let TokenState = sha1("VOD$&!" + VODACC + STAMP)
let timestamp = Date.parse(new Date()) / 1000
let DelayState = (timestamp - Number(STAMP)) > (5 * 60) ? false : true
console.log("TokenState:", TokenState)
console.log("DelayState:", timestamp, STAMP, (timestamp - Number(STAMP)), DelayState)
console.log("VODACC && STAMP && SSOKEY && timestamp - STAMP < 5 * 60:", !!VODACC && !!STAMP && !!SSOKEY && DelayState)

router.beforeEach((to, from, next) => {
  if (!to.meta.requiresAuth) {
    next()
  } else {
    if (VODACC && STAMP && SSOKEY && DelayState) {//&& timestamp - STAMP < 5 * 60
      if (SSOKEY == TokenState) {
        if (to.path !== '/vip') {
          next({ path: '/vip' })
        } else {
          next()
        }
      } else {

        // 如果没有权限，则跳转到 404 页面
        if (to.path === '/404') {
          next()
        } else {
          next({ path: '/404' })


        }
      }

    } else {
      // 如果没有权限，则跳转到 404 页面
      if (to.path === '/404') {
        next()
      } else {
        next({ path: '/404' })


      }
    }
  }



})

/* *******************导航守卫******************* */

router.afterEach((to) => {
  // 根据路由 meta 设置标题
  if (to.meta && to.meta.title) {
    document.title = to.meta.title
  } else {
    document.title = '默认标题'
  }
})

// 错误处理
router.onError((error) => {

  const pattern = /Loading chunk (\d)+ failed/g;

  const isChunkLoadFailed = error.message.match(pattern);

  const targetPath = router.history.pending.fullPath;

  if (isChunkLoadFailed) {

    router.replace(targetPath);

  }

})

 或者

import router from '@/router'
import sha1 from 'js-sha1'
/* *******************导航守卫******************* */
let queryURLParams = (URL) => {
  let obj = {}; // 声明参数对象
  if (URL.includes("?")) {
    // const url = location.search; // 项目中可直接通过search方法获取url中"?"符后的字串
    let url = URL.split("?")[1];
    let arr = url.split("&"); // 以&符号分割为数组
    for (let i = 0; i < arr.length; i++) {
      let arrNew = arr[i].split("="); // 以"="分割为数组
      obj[arrNew[0]] = decodeURIComponent(arrNew[1]);
    }
  } else {
    obj = {
      VODACC: "",
      STAMP: null,
      SSOKEY: null,
    }
  }
  return obj;
}
let URL = window.location.href //"http://192.168.1.180:8082/#/home?SSOKEY=4455559c84204a184e08c96b1aafb4227&STAMP=4075505785&VODACC=vz"// 
console.log(queryURLParams(URL))
let queryURLParamsObj = queryURLParams(URL)
/*取 VODACC 1、用户名*/
let VODACC = queryURLParamsObj.VODACC
/*取 STAMP ,登录时间戳（精确到秒）,时间戳验证，时间戳超过5分钟则判定过期,限制登录*/
let STAMP = queryURLParamsObj.STAMP//Date.parse(new Date()) - 60//;
/*取 SSOKEY SHA1(链接秘钥+loginid+stamp)的值等于token，即视为合法*/
let SSOKEY = queryURLParamsObj.SSOKEY;
let TokenState = sha1("VOD$&!" + VODACC + STAMP)
let timestamp = Date.parse(new Date()) / 1000
let DelayState = (timestamp - Number(STAMP)) > (5 * 60) ? false : true
console.log("DelayState:", timestamp, STAMP, (timestamp - Number(STAMP)), DelayState)
console.log("VODACC && STAMP && SSOKEY && timestamp - STAMP < 5 * 60:", !!VODACC && !!STAMP && !!SSOKEY && DelayState)

router.beforeEach((to, from, next) => {
  if (to.path === '/about') {
    next()
  } else {
    if (VODACC && STAMP && SSOKEY && DelayState) {//&& timestamp - STAMP < 5 * 60
      if (SSOKEY == TokenState) {
        if (to.path !== '/home') {
          next({ path: '/home' })
        } else {
          next()
        }
      } else {

        // 如果没有权限，则跳转到 404 页面
        if (to.path === '/404') {
          next()
        } else {
          next({ path: '/404' })


        }
      }

    } else {
      // 如果没有权限，则跳转到 404 页面
      if (to.path === '/404') {
        next()
      } else {
        next({ path: '/404' })


      }
    }
  }



})

/* *******************导航守卫******************* */

router.afterEach((to) => {
  // 根据路由 meta 设置标题
  if (to.meta && to.meta.title) {
    document.title = to.meta.title
  } else {
    document.title = '默认标题'
  }
})

// 错误处理
router.onError((error) => {

  const pattern = /Loading chunk (\d)+ failed/g;

  const isChunkLoadFailed = error.message.match(pattern);

  const targetPath = router.history.pending.fullPath;

  if (isChunkLoadFailed) {

    router.replace(targetPath);

  }

})

3.在main.js里引入

 

import './routerbeforeeach/index'

 main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './routerbeforeeach/index'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
import moment from "moment";
Vue.prototype.$moment = moment;



Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

4.时间戳获取 

时间戳获取:https://www.beijing-time.org/shijianchuo/

 

 

5.效果图

 

 

 

 

 源码地址：https://github.com/1t1824d/vue_routerbeforeeach_axios

volodyan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue中的前置守卫——改变网页标题
01-08
前置守卫又名前置钩子，也是个回调函数 是在路由跳转前执行的函数 二、代码流程 注意：beforeEach方法一定要在导出路由实例前使用 三、beforeEach的参数含义 to:即将要进入的目标的路由对象 from:当前导航即将要...
vue项目身份认证，vuex，token
m0_49515138的博客
11-16 2284
例如我当前访问⼴告管理/advert，这时我想访问⽤户管理/user，但因为⻓时间没操作，登录状态过期了（⼿动请求 store 模拟），就会⾃动跳回/login，当我再次登录后，默认会跳转到/⾸⻚。之所以出现“用户信息消失”，但是页面仍停留在“首页”，因为后台页面不需要去服务端鉴权，只是在客户端本地验证Vuex中的数据，但是在本地Vuex是无法验证token是否过期。Token用于进行接口鉴权，但Token具有后端设置的过期时间，当Token过期后，就无法再请求接口数据了。a. 成功时，访问组件。
vue之登录路由验证
王永存
10-03 5821
vue之登录路由验证 vue的项目的登录状态如果用vuex状态管理，页面一刷新vuex管理的状态就会消失，这样登录路由验证就没有意义了。可以将登录的状态写到web Storage中进行存储管理。 步骤如下： 1、在登录组件里，将登录状态写入web Storage里。(一般写入session Storage，会话关闭，存储数据自动删除)        if('登录成功')
Vue 路由守卫
最新发布
m0_75026936的博客
04-26 235
前置： beforeRouteEnter (to, from, next) {}后置： beforeRouteLeave (to, from, next) {}语法：beforeEnter(to,from,next){ }作用：初始化时、每次路由切换前执行。作用：初始化时、每次路由切换后执行。
vue路由登录拦截
shykevin的博客
03-01 1690
一、概述 在项目开发中每一次路由的切换或者页面的刷新都需要判断用户是否已经登录，前端可以判断，后端也会进行判断的，我们前端最好也进行判断。 vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach，他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。 导航钩子有3个参数： 1、to:...
Vue--实现登录拦截(Vue、axios、http拦截)
weixin_45406850的博客
12-10 4003
许多页面在访问之前是需要登陆验证的，如果用户没有登录，则需要用户跳转到登陆页面进行登录。 结合自身练习以及资料进行整理，提供以下几种方式 一、Vue通过router实现登录拦截 1.requireAuth requireAuth属性作用是表明该路由是否需要登陆验证，在进行全局拦截时，通过该属性进行判断，该属性包含在meta属性中。 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) routes=[ { pat
Vue中权限控制完全实现
duansamve的博客
06-25 1543
一、菜单的实现： 登录之后获取到的数据： [ { path: "/main/data", alias: "/data", name: "data", meta: { title: "统计", icon: "el-icon-house", re
Vue+vue-router+路由守卫实现路由鉴权功能
一步一个脚印，踏实努力，向着目标前进
05-31 2105
在路由设置中，我们将路由拆分为两类，需要进行鉴权的路由和不需要进行鉴权的路由。需要进行鉴权的路由需要在路由元信息中添加requiresAuth: true属性。路由鉴权功能是Vue+vue-router框架中常见的功能之一，也是前端安全性的一个重要方面。最后，在需要鉴权的页面中，我们可以使用beforeRouteEnter守卫来在进入页面前获取用户信息。在路由设置中，我们为需要鉴权的路由添加requiresAuth元信息。
Vue路由守卫及页面登录权限控制的设置方法(两种)
10-15
Vue Router 提供了多种类型的路由守卫，包括全局前置守卫、全局后置守卫、路由独享守卫和组件内的守卫。这里我们关注全局前置守卫，用于在导航发生之前执行逻辑。 方法一是在创建Vue Router实例时直接设置全局前置...
Vue项目实现简单的权限控制管理功能
10-16
在全局前置守卫中，`to.meta.auths`可以获取到路由所需的权限列表，然后与用户已有的权限列表`havaAuths`进行比较，如果用户不具备访问权限，则重定向至未授权页面。 ### 元素不可见 除了路由级别的权限控制，还...
vue-router 控制路由权限的实现
10-14
Vue Router 提供了前置守卫，如 `beforeEach`，这是一个全局守卫，可以在导航发生之前运行。在 `beforeEach` 函数中，我们可以对即将进入的 `to` 路由进行判断，检查用户是否有权限访问。如果用户已经登录并且有...
Vue 页面权限控制和登陆验证功能的实例代码
10-16
3. **路由守卫**：利用Vue Router的全局前置守卫`router.beforeEach`，在每次切换路由前进行权限检查。例如： ```javascript const role = 'user'; // 假设用户角色为'user' router.beforeEach((to, from, next) ...
vue实现菜单的权限设置
yookooi
04-07 2597
在Vue应用程序中，可以使用路由守卫（route guard）来控制用户的访问权限，从而实现菜单权限设置。以下是一个简单的实现方法：
vue2vue3中路由元信息配置。切换页面跳转路由更换title
liaoxianhua888的博客
06-22 1254
vue2vue3中路由元信息配置。切换页面跳转路由更换title
【Vue2 全局前置导航守卫】
武帝为此的博客
10-20 159
全局前置导航守卫是允许在路由导航开始前执行一些任务。权限验证：可以检查用户是否有访问特定页面的权限，如果没有权限，可以阻止路由跳转或者重定向到其他页面。数据加载：在加载页面之前，可以获取所需的数据，确保页面渲染时具备必要的信息。日志记录：记录用户每次导航的行为，以便进行分析和故障排除。使用全局前置导航守卫来实现诸如权限验证、数据加载和日志记录等功能，
Vue-导航守卫——全局前置守卫
世界和我们都不该止步于此
05-13 3713
目录 全局前置路由守卫 next函数三种调用方法 Vue的导航守卫是什么？可以做什么？ 导航守卫可以控制路由的访问权限--什么意思呢？ 假如现在我们想要在某一个应用程序主页面点击对应路由链接跳转到后台的管理系统 那么这时路由守卫就起到了一个检测的作用 路由守卫的名字起的很形象，它其实就是充当了一个'保安'的职责 只有你登录成功了，在localStorage本地存储中的token有值，守卫才会让你进入后台的管理系统 如果没有路由守卫-不能控制访问权限的话，任何人点击路由链接就会跳转到后台管.
Vue——token原理、路由导航守卫与请求拦截器
weixin_43599321的博客
01-08 2550
当页面跳转时，如何才能保存页面的状态呢？有三种方式能够保存页面状态这篇博客只讲解一下token方式，关于cookie与session的原理可以查阅往期node.js的博客。
vue.js路由如何配置，及全局前置路由守卫(做所有请求登录验证)、路由独享守卫（访问路由前身份验证）
TangMonk的博客
09-15 586
【代码】vue.js路由配置以及全局前置路由守卫！
vue 路由前置守卫
10-18
Vue 路由前置守卫是指在路由跳转之前，可以通过注册全局或者局部的守卫函数来进行一些操作，比如验证用户是否登录、权限验证等。在 Vue Router 中，路由守卫分为三种：全局前置守卫、全局后置钩子和组件内的守卫。 全局前置守卫通过 router.beforeEach() 注册，可以在路由跳转之前进行一些操作，比如验证用户是否登录、权限验证等。如果要取消全局前置守卫，可以通过 router.beforeEach() 返回的函数来取消。 下面是一个简单的例子： ```javascript router.beforeEach((to, from, next) => { // 判断用户是否登录 if (to.meta.requireAuth && !store.state.isLogin) { next({ path: '/login', query: { redirect: to.fullPath } }) } else { next() } }) ``` 在上面的例子中，我们判断了用户是否登录，如果没有登录，则跳转到登录页面，并且在登录成功后再跳转到目标页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

volodyan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值