一旦用户登录应用，我们希望能够让他们保持登录状态，即使他们刷新了浏览器或关闭了应用正在运行的那个选项卡。在本篇，我们将学习如何实现自动登录。
user State 消失
目前，如果在用户登录的情况下刷新浏览器，可以在 Vue DevTools 的 Vuex 选项卡中看到“user” state 变成了 null。如果关闭应用并在新选项卡中重新打开，也会这样。但我们肯定不希望这些操作就让用户失去登录状态。相反，我们可以利用浏览器 Local Storage 中已有的用户数据来恢复这个 Vuex state，从而有效地让用户自动重新登录。
为了解决这个问题，我们在 main.js 添加一些在每次应用created时运行的代码。
实现自动登录
当应用created时，我们会检查 Local Storage 中是否有用户，有就用该用户数据触发SET_USER_DATA Mutation 恢复 Vuex 的user state。当用户登录时，我们使用 Vuex Mutation SET_USER_DATA设置我们的用户数据。
让我们在 main.js 文件中实现这一点。
src/main.js
new Vue({
router,
store,
created () {
const userString = localStorage.getItem('user') // 从 localStorage 查询 user data
if (userString) { // 检查是否有登录用户
const userData = JSON.parse(userString) // 把 user data 处理成 JSON
this.$store.commit('SET_USER_DATA', userData) // 重新把 user data 存到储 Vuex state
}
},
render: h => h(App)
}).$mount('#app')
在 created 钩子中我们检查 localStorage 是否有 user data，存在就将数据解析为 JSON，并在 commit SET_USER_DATA时将其作为 payload 传递，有效地让我们的用户重新登录。
现在用户不必在每次刷新浏览器时手动登录。
添加安全举措
有人可能会恶意地将伪造的token保存到 localStorage 中。虽然这可能允许他们导航到我们应用的某些受限部分，但当他们导航到某个地方对私有资源进行 API 调用时，我们可以拦截该请求并让他们登出。
src/main.js
new Vue({
router,
store,
created () {
...
axios.interceptors.response.use(
response => response,
error => {
if (error.response.status === 401) { // if we catch a 401 error
this.$store.dispatch('logout') // 强制 logout
}
return Promise.reject(error) // reject the Promise，携带出错原因
}
)
},
render: h => h(App)
}).$mount('#app')
如果我们逐步执行此操作，会看到我们正在拦截来自 axios 的响应，并在一切正确时按原样返回。但是，当出现 error 时，我们会检查它是否是 401 状态代码 (这意味着用户无权查看他们尝试加载的内容)，如果是，我们使用 Vue Router 重定向到主页，并使用 Vuex 强制注销。然后我们将返回对 Promise.reject，并传入 error 作为 reject 的原因。
现在，即使有人试图用伪造的token来入侵我们的应用，一旦他们尝试访问私有资源，就会被强制注销(logout)。
回顾
在本篇，我们添加了一个自动将用户重新登录到应用的功能，还添加了一个让使用假token的恶意用户退出应用的功能。
本节源码
系列教程
Token-based Authentication 身份验证一 - Intro to Authentication
Token-based Authentication 身份验证二 - Project Structure 项目结构
Token-based Authentication 身份验证三 - User Registration 用户注册
Token-based Authentication 身份验证四 - User Login 用户登录
Token-based Authentication 身份验证五 - User Logout 用户登出
Token-based Authentication 身份验证六 - Handling Errors 错误处理
Token-based Authentication 身份验证七 - Automatic Login 自动登录
网友评论