后端和前端之间使用 CASL 库共享的用户授权

【问题标题】：User Authorization with CASL library share between backend and frontend后端和前端之间使用 CASL 库共享的用户授权
【发布时间】：2020-08-12 04:41:43
【问题描述】：

我正在寻找一种在前端（React）和后端（Node.js、Koa、GraphQL）中实现授权的方法。我偶然发现了 casl 包：https://github.com/stalniy/casl。

虽然后端授权对我来说似乎很简单，但我不明白如何将我的授权规则从后端共享到前端。一篇中型帖子建议使用 JWT 代币。如何使用 JWT 令牌做到这一点？

https://medium.com/dailyjs/casl-and-cancan-permissions-sharing-between-ui-and-api-5f1fa8b4bec

【问题讨论】：

您可以随意分享规则。毕竟这只是一个对象数组。最简单的方法是在登录请求的响应正文中返回它们。

标签： javascript node.js reactjs casl

【解决方案1】：

似乎 CASL 有两个函数来实现这一点，packRules 和 unpackRules。

根据后端的文档，您可以这样做：

import { packRules } from '@casl/ability/extra';
import jwt from 'jsonwebtoken';
import { defineRulesFor } from '../services/appAbility';

app.post('/session', (req, res) => {
  const token = jwt.sign({
    id: req.user.id,
    rules: packRules(defineRulesFor(req.user))
  }, 'jwt secret', { expiresIn: '1d' });

  res.send({ token });
});

在前端你可以这样做：

import { unpackRules } from '@casl/ability/extra'
import jwt from 'jsonwebtoken';
import ability from '../services/appAbility';

export default class LoginComponent {
  login(params) {
    return http.post('/session')
      .then((response) => {
        const token = jwt.decode(response.token);
        ability.update(unpackRules(token.rules))
      });
  }
}

https://stalniy.github.io/casl/v4/en/api/casl-ability-extra

【讨论】：