构建Vue项目-身份验证

最新推荐文章于 2023-12-14 14:12:41 发布

EthanQ

最新推荐文章于 2023-12-14 14:12:41 发布

阅读量627

点赞数

分类专栏： Vue.js 文章标签： Vue.js Vuex 权限验证 Vue Router

本文链接：https://blog.csdn.net/ethanq/article/details/104050510

版权

本文介绍如何在Vue.js 2.5项目中结合Vuex和Vue Router实现身份验证。通过创建受保护的页面，仅允许登录用户访问特定URL。详细步骤包括在router.js中设置路由权限，利用Vue Router的meta参数进行登录状态判断，以及如何设计TokenService以灵活处理用户凭证的存储。此外，还强调了避免直接操作本地存储以防止未来问题的良好实践。

摘要由CSDN通过智能技术生成

通常，在开始使用新框架或新语言工作时，我会尝试查找尽可能多的最佳实践，而我更喜欢从一个易于理解，维护和升级的良好结构开始。在这篇文章中，我将尝试解释自己的想法，并将过去几年中获得的所有知识与最新，最好的Web开发实践结合起来。

我们将共同构建一个简单的项目，该项目处理身份验证并准备在构建应用程序其余部分时要使用的基本脚手架。

我们将使用：

Vue.js 2.5 和 Vue-CLI
Vuex 3.0
Axios 0.18
Vue Router3.0

这是最终项目结构。假设您已经阅读了Vue，Vuex和Vue Router文档，并且了解了其中的基础知识。

└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── main.js
    ├── router.js
    ├── services
    │   ├── api.service.js
    │   ├── storage.service.js
    │   └── user.