安全登录Vue.js SPA

Question

我是Vue.js的新手，我学习了很多教程，但有一件事困扰着我。比方说我正在建一个SPA。用户可以登录，然后使用RESTful API访问数据。

因此，第一步是将我的登录信息(用户名、密码(发送到API并接收令牌。令牌将保存到我的vuex中，也保存到localstorage/cookie中，以便用户在页面刷新后保持登录状态。

对API的所有其他请求都将由令牌签名。

我的路线设置好了：

const routes = [
{
path: '/dashboard', name: 'dashboard', component: Dashboard, meta: { requiresAuth: true }
},
{
path: '/login', name: 'Login', component: Login,
},
]

我正在使用路由保护来保护/仪表板页面不显示给未登录的用户：

router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!store.getters.loggedIn) {
next({ path: "/login" })
} else {
next();
}
} else {
next();
}
})

我关心的是vuex存储中的loggedIngetter，它是这样实现的：

const getters = {
loggedIn(state) {
return state.token !== null;
}
};

一切都正常工作。我知道如果没有访问令牌，我将无法从服务器获取数据。

但是

我可以打开开发人员工具，用一个随机值将access_token放在我的本地存储中，刷新页面，然后我就可以突然访问/dashboard页面了。

所以我的问题是，如何避免这种情况？

我的第一个想法是，有两个页面——登录页面和第二个包含SPA的页面。身份验证将通过会话服务器端完成，并且SPA页面只能由登录用户访问。

或者有什么标准的方法可以做到这一点，这样我的SPA就可以处理这个问题了？

Answer 1

正如评论中所说，我会创建一个checkLogin()，如下所示：

checkLogin() {
axios
.get('/webapi/check')
.then(() => {})
.catch(err => {
if (err.response.status === 401) {
// use a mutation to toggle your "loggedIn" state
this.$store.commit('loggedIn', false)
if (this.$route.path !== '/login') {
this.$router.push('/login')
}
}
})
}

在那里，你可以使用你的routeGuard在每次更改时使用该功能

并且ofc的后端不应该允许没有令牌的有效后端响应

---

更新

u需要一个loggedIn的状态然后你做一个突变，根据你后端的反应来切换这个状态。