This template should help get you started developing with Vue 3 in Vite.
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
See Vite Configuration Reference.
npm install
npm run dev
npm run build
node server.js
npm run start
- 注册
- 登录
- 访问受保护的数据
- 参考 JWT
- 在 Vuex state 中存储 userData
- 在 localstorage 中存储 userData
- 在 axios header 中增加 token
- 清除 localstorage 中存储的 userData
- 清除 Vuex state 中的 userDate 和 axios header 中的 token, 使用 location.reload() 可以实现
- 给
/dashboard
路由增加meta: {requireAthu: true}
router.beforeEach
判断当路由有meta.requireAthu
时是否已登录,- 如果未登录,
next('/')
- 如果已登录,
next()
- 如果未登录,
- 参考 Navigation Guards
- 参考 Route Meta Fields
- 登录后, 刷新页面或者关闭页面标签仍保持登录状态
- 从 localstorage 取出 userData, 调用 Vuex action
当攻击者试图使用伪造的 token 访问受保护资源, 中断并立即登出
new Vue({
router,
store,
created () {
...
axios.interceptors.response.use(
response => response, // simply return the response
error => {
if (error.response.status === 401) { // if we catch a 401 error
this.$store.dispatch('logout') // force a log out
}
return Promise.reject(error) // reject the Promise, with the error as the reason
}
)
},
render: h => h(App)
}).$mount('#app')