Javascript localStorage：防止无效令牌答案

【问题标题】：Javascript localStorage: prevent invalid tokensJavascript localStorage：防止无效令牌
【发布时间】：2019-10-03 18:45:33
【问题描述】：

我正在使用 vue-cli 学习 VueJS。

应用程序从/login 路由开始，如果设置了令牌，我将用户路由到/dashboard，我是这样做的：

router.js

{
      path: '/',
      redirect: '/login',
},
{
      path: '/dashboard',
      name: 'dashboard',
      component: Dashboard,
      meta:{
        requiresAuth: true
      }
},

main.js

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    //Non logged
    if (!store.getters.isLoggedIn) {
      next({
        path: '/login',
      })
    } else {
      next()
    }
  } else if (to.matched.some(record => record.meta.requiresVisitor)) {
    //Logged
    if (store.getters.isLoggedIn) {
      next({
        path: '/dashboard',
      })
    } else {
      next()
    }
  } else {
    next()
  }
})

store.js（我的商店文件）

const state = {
  status: '',
  token: localStorage.getItem('token') || '',
  user: {}
};

记录时，应用程序设置localStorage.setItem('token', token)。所以这行得通。

唯一的一点是我可以在Chrome Dev Tools > Application > Local Storage 中手动设置令牌并将其设置为123，然后手动导航到/dashboard 并显示路线，当然此时所有其他API调用都会无法使用，因为令牌无效，但我仍然看到受保护的页面。

这只是正常行为吗？有没有办法观察本地存储的变化并在那一刻发送 API 调用？

【问题讨论】：

这是正常行为，因为您的应用正在寻找令牌并且未连接到您的 jwt 后端。一旦用户输入 /login 来验证令牌，您就可以进行 api 调用
是的，它被称为服务器端会话，调用后端并验证他们可以访问 api 等。

标签： javascript vue.js

【解决方案1】：

用户计算机上的持久数据，当用户无法删除数据时，可能与恶意软件相关联。

我会忽略能够更改令牌的用户，因为这不是您的问题，而且普通用户无论如何也不知道如何做到这一点。

如果您想查看本地存储的更改，请参阅此答案here.

编辑：更改了特定于 vue 的链接，而不是 Angular。

【讨论】：