Tinyo Docs

Appearance

On this page

管理后台权限控制 ​

管理后台的角色通常会按等级区分，不同的等级会有不同的可访问路由权限。而可访问的路由权限一般是登录后由接口返回的，前端可以根据返回的权限数据来做对应的权限控制处理。

权限控制的意义：

  1. 降低非法操作的可能性，减少不必要的请求，减轻服务器压力。
  2. 业务逻辑的隔离，不同角色的用户只能访问其所需的业务逻辑和功能，这有助于实现业务逻辑的隔离，减少可能出现的错误和冲突。
  3. 安全性，通过限制用户的访问权限，可以防止未经授权的用户访问敏感数据或执行危险操作，避免数据泄露、篡改或其他安全漏洞。

在做权限控制的时候也需要考虑以下几点问题：

  1. 可访问的路由信息处理。
  2. 接口返回的权限数据如何进行存放。
  3. 假设存储在缓存中，考虑非法修改缓存路由信息，从而非法访问页面情况。
  4. 页面的控制，404、重定向等。

实现方式 ​

  • 静态路由+动态路由

未登录时，只可访问静态路由。在用户进行登录获取到动态路由信息后，将动态路由和静态路由合并，生成最终可访问路由。

可以通过vue router的 addRoute 方法来实现路由的添加操作。

  • 无权限，仅判断登录

在 router 文件中将所有的路由数据定义好，登录后可访问的页面可以在 meta 中定义 isLogin 字段，用于标记是否需要登录。在全局路由守卫中进行判断用户登录，从而实现简单的路由控制。

也可以通过维护一个白名单的方式来控制，原理和效果也是一致的。

页面控制 ​

需要做一些常见的页面控制，如果用户没有登录，手动在地址栏敲入管理界面的地址，则需要跳转到登录界面。如果用户已经登录，如果手动敲入非权限内的地址，则需要跳转404 界面。

通过在全局的路由守卫中定义即可，简单例子如下：

js
const whiteList = ['/', '/login', '/register']

router.beforeEach((to, from, next) => {
  if (getToken()) {
    // 已登录，直接进入
    next()
  } else if (whiteList.indexOf(to.path) !== -1) {
    // 访问的页面为免登录白名单，直接进入
    next() 
  } else {
    // 否则全部重定首页
    next('/')
  }
})

路由信息存储 ​

常见的作法是将用户登录后将路由信息存储在vuex中，但这也会带来一个问题，vuex的数据在页面刷新后会消失，如何处理这个问题？

  • 备份到sessionStorage
  • vuex插件
  • 重新请求数据

vuex问题解决