Question

我正在通过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调用？

Answer 1

当用户无法删除数据时，在用户计算机上保留数据可能会与恶意软件相关联。

我将忽略用户能够更改令牌的权限，因为这不是您的问题，普通用户也不知道该怎么做。

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

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

Javascript localStorage：防止无效令牌

1 个答案: