Javascript 安全登录到Vue.js SPA

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

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

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

我的路线设置为：

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

我正在使用route guard保护/dashboard页面不显示给未登录的用户：

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;
    }
};

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

但是…

我可以打开开发人员工具，用随机值将访问令牌放入本地存储，刷新页面，然后突然可以访问/dashboard页面

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

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

---

或者有什么标准的方法来解决这个问题，这样我的SPA就可以处理这个问题了？

如评论中所述，我会创建一个

checkLogin（）

，如下所示：

checkLogin（）{
axios
.get（'/webapi/check'）
.然后（（）=>{}）
.catch（错误=>{
如果（err.response.status==401）{
//使用变异来切换“loggedIn”状态
此.$store.commit（'loggedIn'，false）
如果（此.$route.path！=='/login'）{
这是。$router.push（“/login”）
}
}
})
}

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

ofc ur后端不应允许没有令牌的有效后端响应

---

已更新

你需要loggedIn的状态

---

然后，根据后端响应的方式，执行一个变异以切换此状态。

我将执行一个“checkIsLoggedIn”api函数。每次路线改变都会触发。如果api的响应是401，您的用户在尝试访问其他站点时应进入登录页面您无法“真正”“保护”前端，而且如果您愿意，您可以随时解决它，您必须通过每次调用来保护后端，因此，请与JWT或cookie进行检查，如果令牌或cookie仍然有效，您必须检查每个调用。如果不是，你可以抛出一个例外，这是我的第二个猜测——在每次路线更改中获取当前用户。我还没有找到一个能做到这一点的教程。我觉得这是个好主意。