在用户权限的part 1中，使用Firebase对API端点的特权的原则，我们解释了使用角色和权限来管理用户身份验证和授权的必要性。
我们还将原理应用于各种服务器端点。在这里，我们正在使用Vue.js直接跳入客户端实现，这是一个用于构建Web用户界面的平易近人，性能和通用的框架。
下面描述了项目树的快速显示：
.
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
│ └── vite.svg
├── src
│ ├── App.vue
│ ├── assets
│ │ ├── avatar.png
│ │ └── vue.svg
│ ├── components
│ │ ├── core
│ │ │ └── Header.vue
│ │ ├── generics
│ │ └── user
│ │ ├── User.vue
│ │ ├── UserCard copy.vue
│ │ ├── UserCard.vue
│ │ ├── UserCreate.vue
│ │ ├── UserSkeleton.vue
│ │ ├── UserUpdate.vue
│ │ └── Users.vue
│ ├── config
│ │ └── index.js
│ ├── database
│ │ └── index.js
│ ├── firebase
│ │ └── index.js
│ ├── main.js
│ ├── router
│ │ └── index.js
│ ├── service
│ │ └── index.js
│ ├── store
│ │ ├── index.js
│ │ └── modules
│ │ └── user.js
│ ├── style.css
│ ├── utils
│ │ └── index.js
│ └── views
│ ├── Dashboard.vue
│ ├── Login.vue
│ ├── NotFound.vue
│ └── Register.vue
└── vite.config.js
与服务器端不同，客户端是直截了当的，因为大多数繁重的提升已经在服务器上执行。但是，很少有目录值得一提：components，config，firebase，store和utils。
组件目录具有在客户端执行CRUD操作的所有各个页面。配置目录具有用于提出请求和从服务器获得响应的axios实现。
export const request = async (url, method, token, payload, query) => {
return await axios({
method: method,
url: `${url}`,
data: payload,
params: query,
headers: {
'Accept': 'application/json',
'Authorization': `Bearer ${store.getters.idToken}`,
},
json: true,
});
};
然后，firebase目录具有Firebase configuration object包含我们应用程序的键和标识符。
商店目录具有管理我们数据状态的Veux商店，并有助于集中对API端点的请求实现。我们将很快回到Veux Store。
最后，具有我们自定义的函数的Utils目录。在此文件中，我们定义了isAuhorised方法，该方法与firebase onAuthStateChanged一起支持用户token和claims的重新验证。
/**
* check user authorisation
* @param {string} action
* @returns {boolean}
*/
export const isAuhorised = (action) => {
// TODO: get current user permissions
const { permissions } = store.getters.profile;
// TODO: verify if user has permission for the intended action
return permissions.some(permission => permission.name === action && permission.value === true);
};
main.js文件作为我们客户端应用程序的入口点。在这里，我们使用firebase/auth的onAuthStateChanged方法来识别和设置用户，身份验证状态，角色和权限自定义索赔中签名的当前，以及id token。
onAuthStateChanged(auth, async user => {
if (user && user.emailVerified) {
const idTokenResult = await user.getIdTokenResult();
const { claims: { entity, name, permissions } } = await user.getIdTokenResult();
if (idTokenResult && idTokenResult.claims) {
await store.dispatch('setProfile', { ...user, entity, name, permissions });
await store.dispatch('setClaims', idTokenResult.claims);
await store.dispatch('setIsAuthenticated', true);
await store.dispatch('setIdToken', idTokenResult.token);
await store.dispatch('setCurrentUser', idTokenResult.claims.entity);
}
}
});
最后，在Veux Store中，我们将使用user.js作为调用用户端点的入口点。为了确保仅授予用户执行任务所需的必要访问权限，我们将使用isAuhorised函数。必要的操作作为参数传递，允许或拒绝向服务器请求。
if(!isAuhorised('readAll')) return;
以这种方式，我们确保用户没有允许这样做，否则不要尝试请求。本教程的存储库在github上。
如果您喜欢这篇文章，请喜欢并与朋友分享。