vue后台管理系统在同一浏览器登录不同权限角色cookie被覆盖刷新页面问题(简单有效!!!)

场景:

在同一浏览器,登录同一个系统,打开两个标签页,登录不同角色权限的账号,会出现先登录的cookie会被后来登录的cookie给覆盖掉。

从而导致,原来打开的页面就会带着新的token信息去请求后台,但页面显示的还是之前权限角色范围内的信息,这样是有问题的,按道理,原来的页面应该变成后面登录角色的权限范围内应该展示的页面及内容。

解决方案:

一开始,我在网上看了很多文章,但是,大多数说的都过于复杂且改动过于麻烦,有的问题都不对应,所以,最后我只能自己想办法了。下面是我的解决方案,直接上代码:

  created() {
    document.addEventListener("visibilitychange", function () {
      if (store.getters.token != getToken()) {
        location.reload();
      }
    });
  },

就简单的几行代码就可以解决掉这个问题了,这段代码我写到了App.vue文件里。主要用到 visibilitychange 事件监听,当点击切换标签页时会触发。此时,用本地的cookie里的token和vuex的store里的token进行比较,如果不一样,则进行刷新页面操作。这样就可以成功解决掉这个问题了,简单又实用。

注意: getToken()是我自己封装的读取cookie的方法。这个不一定要和我这写的一样,思路一样就行。

如果觉得对你有帮助~可以点个赞,鼓励鼓励作者哟!

  • 8
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现一个基于 Flask 和 Vue 的 RBAC 权限管理系统后台,需要设计一个用户角色权限数据结构,用于存储用户信息、角色信息、权限信息以及角色权限的关联信息。下面给出一个简单的数据结构: ```python # 用户信息 class User(db.Model): id = db.Column(db.Integer, primary_key=True) username = db.Column(db.String(64), unique=True) password_hash = db.Column(db.String(128)) role_id = db.Column(db.Integer, db.ForeignKey('role.id')) # 角色信息 class Role(db.Model): id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(64), unique=True) description = db.Column(db.String(128)) permissions = db.relationship('Permission', secondary='role_permission', backref=db.backref('roles', lazy='dynamic')) # 权限信息 class Permission(db.Model): id = db.Column(db.Integer, primary_key=True) name = db.Column(db.String(64), unique=True) description = db.Column(db.String(128)) # 角色权限的关联信息 class RolePermission(db.Model): id = db.Column(db.Integer, primary_key=True) role_id = db.Column(db.Integer, db.ForeignKey('role.id')) permission_id = db.Column(db.Integer, db.ForeignKey('permission.id')) ``` 在这个数据结构中,每个用户只能拥有一个角色,每个角色可以包含多个权限。接下来,需要在后台实现权限控制的逻辑。例如:在页面请求时,判断当前用户是否具有访问该页面权限,如果没有权限,则返回错误信息;如果有权限,则返回页面数据。可以通过 Flask 中的装饰器实现权限控制逻辑: ```python from functools import wraps from flask import abort from flask_login import current_user def permission_required(permission): def decorator(f): @wraps(f) def decorated_function(*args, **kwargs): if not current_user.can(permission): abort(403) return f(*args, **kwargs) return decorated_function return decorator ``` 这个装饰器接受一个权限参数,表示需要具有该权限才能访问页面,如果用户没有该权限,就返回 403 错误。 在前端页面中,可以通过 Vue 的路由拦截器实现权限控制的逻辑。例如:在页面请求时,判断当前用户是否具有访问该页面权限,如果没有权限,则跳转到错误页面;如果有权限,则显示页面内容。可以通过 Vue 中的路由拦截器实现权限控制逻辑: ```javascript router.beforeEach((to, from, next) => { if (to.meta.permissions && !checkPermission(to.meta.permissions)) { next({ path: '/error', replace: true }); } else { next(); } }) function checkPermission(permissions) { var role = JSON.parse(localStorage.getItem('user')).role; var rolePermissions = role.permissions.map(p => p.name); return permissions.every(p => rolePermissions.includes(p)); } ``` 这个路由拦截器接受一个权限参数,表示需要具有该权限才能访问页面,如果用户没有该权限,就跳转到错误页面。可以通过在用户登录时,将用户信息存储在本地缓存中,然后在路由拦截器中获取用户信息,判断用户是否具有该权限
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值