安全登录 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,
    },
]

我正在使用路由保护来保护 /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();
    }
})

我关心的是 loggedIn getter 以这种方式实现的 vuex 商店：

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

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

但是...

我可以打开开发者工具，将一个 access_token 随机值放到我的本地存储，刷新页面，突然我可以访问 /dashboard 页面。

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

我的第一个想法是，有 2 个页面 - 登录页面和包含 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 在每次更改时使用该功能

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

已更新

你需要登录状态然后你做一个突变来切换这个状态取决于你的后端响应如何。

安全登录 Vue.js SPA

Secure logging in to a Vue.js SPA

javascript

vue.js

security

routes

vuejs-routing