我有一个 VueJS 应用程序，使用 Vuex 和 Vue 路由器。 我有 3 个组件(也是页面):主页、登录和一个 protected 页面，需要对其中一个进行身份验证。
登录页面对后端 API 进行 POST 调用，如果凭据有效，后端 API 会返回一个 token 。
methods: {
sendCredentials: function() {
const { email, password } = this
this.$store.dispatch(AUTH_REQUEST, {email, password})
.then(() => {
this.$router.push('/')
})
.catch((err) => console.log(err.response));
}
}
相关 Action 如下:
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);
})
});
}
如果用户未登录，我已经使用导航守卫来阻止对 protected 页面的访问。
这确实有效:当我进入 protected 页面时，系统会要求我登录。当我使用权限凭证时，我能够访问 protected 页面。
我还有一个大错误:当我将任何随机字符串作为 userToken 放在 localStorage 上时，我可以访问 protected 页面...
如何预防？
初始状态定义如下:
state: {
token: localStorage.getItem('userToken') || '',
},
有没有办法验证我在设置 token 的初始状态时通过 localStorage 获得的 userToken？
最佳答案
我刚才也在想同样的事情。我最终得到的是在初始加载页面时根据后端检查 token 。如果 token 有效，则将其提交给 Vuex，如果 token 无效，则从 localStorage 中删除所有内容。
这会导致这样的结果，假设有人可以在初始加载后用他们自己的无效 token 替换 token ，但如果客户端 token 已经过验证，那又有什么意义呢？如果你也想针对这种情况进行保护，你可以在你的导航守卫中应用相同的逻辑。因此，不仅要检查 token ，还要在每次路由更改时针对您的后端验证 token ，如果无效则清除 localStorage。我认为由于额外的 API 调用，这会带来性能劣势。
关于authentication - VueJS/Vuex App - 验证用于身份验证的 JWT token ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53307261/