VueJS / Vuex App - 验证用于身份验证的 JWT 令牌

Question

我有一个 VueJS 应用程序，使用 Vuex 和 Vue 路由器。我有 3 个组件（也是页面）：主页、登录和一个受保护的页面，需要对其中一个进行身份验证。

登录页面对后端 API 进行 POST 调用，如果凭据有效，该调用 returns 一个令牌。

  methods: {
    sendCredentials: function() {
      const { email, password } = this
      this.$store.dispatch(AUTH_REQUEST, {email, password})
      .then(() => {
          this.$router.push('/')
      })
      .catch((err) => console.log(err.response));
    }
  }

相关操作如下：

actions: {
    [AUTH_REQUEST]: ({ commit, dispatch }, user) => {
        return new Promise((resolve, reject) => {
            commit(AUTH_REQUEST);
            axios.post('http://localhost:3000/api/login', user)
                .then((resp) => {
                    const token = resp.data.token;
                    localStorage.setItem('userToken', token);
                    commit(AUTH_LOGIN, token);
                    resolve(resp);
                })
                .catch(err => {
                    commit(AUTH_ERROR, err);
                    localStorage.removeItem('userToken');
                    reject(err);
                })

        });
    }

如果用户未登录，我已经使用导航守卫来阻止对受保护页面的访问。

这确实有效：当我进入受保护页面时，系统会要求我登录。当我使用权限凭证时，我能够访问受保护页面。

我还有一个大错误：当我将任何随机字符串作为 userToken 放在 localStorage 上时，我可以访问受保护的页面...

如何预防？

初始状态定义如下：

state: {
    token: localStorage.getItem('userToken') || '',
},

有没有办法验证我在设置令牌的初始状态时通过 localStorage 获得的 userToken？

Answer 1

我刚才也在想同样的事情。我最终得到的是在初始加载页面时根据后端检查令牌。如果令牌有效，则将其提交给 Vuex，如果令牌无效，则从 localStorage 中删除所有内容。

这会导致这样的结果，假设有人可以在初始加载后用他们自己的无效令牌替换令牌，但如果客户端令牌已经过验证，那有什么意义呢？如果你也想针对这种情况进行保护，你可以在你的导航守卫中应用相同的逻辑。因此，不仅要检查令牌，还要在每次路由更改时针对您的后端验证令牌，如果无效则清除 localStorage。我认为由于额外的 API 调用，这会带来性能劣势。

VueJS / Vuex App - 验证用于身份验证的 JWT 令牌

VueJS / Vuex App - Validate JWT Token USED for Authentication

authentication

jwt

vue.js

vue-router

vuex