Oauth 2.0 OAuth2、API和JavaScript应用程序-令牌验证服务器端还是客户端？

我不熟悉OAuth2和单页应用程序（SPA），正在考虑构建一个使用

implicit

grant类型的应用程序

我正在为JavaScript应用程序使用VUEJS（类似于React或Angular）

我对向受保护资源提供访问令牌的过程感到困惑，以及SPA开发人员是否应该在该点验证访问令牌，或者这是否是受保护资源开发人员通常提供的服务

以下是我的流程，以便更好地说明我的困惑：

客户端SPA（通过网页包编译）和受保护的资源/数据都将驻留在同一域/网络上，并使用授权服务器（也在同一域上）

身份验证服务器将通过单点登录（SSO）服务提供授权，我将能够注册应用程序并获取

客户端id

，以便在SPA代码中使用。由于

隐式

授予类型，因此不需要客户端\u机密

一旦用户导航到

https://my-spa.com

，加载应用程序，然后它检查

本地存储

是否存在令牌

下面是我的代码逻辑和路由器示例：

如您所见，如果不存在令牌，应用程序将向用户提示登录页面和登录按钮。此登录按钮将用户重定向到身份验证服务器，用户可以在其中输入用户名和密码进行身份验证。如果有效，他将被重定向到应用程序的

/protected resource

页面，并在响应参数中使用访问令牌

我的问题是……

SPA是否需要在此时执行任何其他操作以验证令牌？前端SPA开发人员是否向受保护的资源服务器说“这是我的令牌，请为我验证”，或者SPA开发人员是否希望在其SPA代码中代表受保护的资源执行此功能？资源服务器的后端是否进行检查？假设令牌作为JSON对象进入

---

最后，…SSO服务提供一个端点，返回JWT验证密钥。这是否需要在SPA代码中的某个地方？不确定这是什么…

如果用户使用随机字符创建一个新的

localstore

令牌并转到您的my-spa.com页面，会发生什么情况？@Daniel yea，您可以使用假令牌操纵客户端应用程序。要实际获取受保护的数据，需要由资源服务器验证令牌。我只是不知道该怎么做。我得到了一个应用程序，它的工作原理基本相同。它希望令牌位于localstore中。如果它丢失，用户会看到注册页面，如果它存在，它会假定它是正确的，并呈现页面。需要注意的是，如果令牌错误，页面看起来很糟糕，因为api请求失败，并且数据没有加载。我刚开始想办法解决这个问题。修复方法是，如果任何API请求返回401/Unauthorized响应，应用程序将从localstore中删除令牌并重定向到login.on point#1，如果可能，尝试将应用程序置于相同的端口号上。如果您可以让api服务器同时提供静态（前端）文件，那么您可以绕过浏览器的一些安全性不一致问题。@Daniel Yea，因此我认为这现在是有意义的。我发现“SPA+API”的流程有一个很好的总结：

router.beforeEach((to, from, next) => {

        const token = window.localStorage.getItem('tokens-myProvider')

        if (to.matched.some(record => record.meta.requiresAuth)) {
            //if token exists, continue user to protected resource
            if (token !== null) {
                next()
            } else {
                //if no token exists, send to landing page with login button
                next({
                    path: '/',
                    query: {
                        redirect: to.fullPath
                    }
                })
            }
        } else {
            // if token exists and user navigates to root, redirect to /protected-resource
            if (token !== null && to.path == '/') {
                next({ path: '/protected-resource' })
            } else {
                next() // make sure to always call next()!
            }
        }
    })