1

我对 Vue.js 很陌生，我学习了很多教程，但有一件事让我很困扰。假设我正在构建一个 SPA。用户可以登录，然后使用 RESTful API 访问数据。

所以第一步是将我的登录信息（用户名、密码）发送到 API 并接收令牌。令牌将保存到我的 vuex 以及本地存储/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();
    }
})

我担心的是来自 vuex 商店的loggedIn getter，它是通过这种方式实现的：

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

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

但...

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

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

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

还是有一些标准的方法来解决这个问题，所以我的 SPA 可以处理这个？

4

1 回答 1

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 在每次更改时使用该功能

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

更新

您需要一个已登录的状态，然后您根据后端响应的方式进行突变以切换此状态。

于 2020-11-01T18:08:56.983 回答