Vue.js 实现登录验证拦截

"Vue.js 实现登录拦截" 在前端开发中，登录拦截是一个常见的需求，主要是为了保护用户的隐私和安全，确保只有经过身份验证的用户才能访问特定的页面或功能。在 Vue.js 框架中，我们可以利用路由守卫（Route Guard）来实现这一功能。以下将详细讲解如何在 Vue.js 项目中实现登录拦截。 首先，我们需要创建一个登录页面，这个页面通常包含用户名和密码输入框以及登录按钮。示例代码如下： ```html <template> <div class="htmleaf-container"> <div class="demo form-bg"> <div class="container"> <div class="row"> <div class="col-md-offset-3 col-md-6"> <form class="form-horizontal"> <span class="heading">用户登录</span> <!-- 用户名输入框 --> <div class="form-group"> <input type="text" class="form-control" id="inputtxt" placeholder="用户名" v-model="username" @blur="inputUserBlur" @focus="inputFocus"> <i class="fa fa-user"></i> </div> <!-- 密码输入框 --> <div class="form-group help"> <input type="password" class="form-control" id="inputPassword3" placeholder="密码" v-model="psd" @blur="inputPsdBlur"> <i class="fa fa-lock"></i> <a href="#" rel="external nofollow" class="fa fa-question-circle"></a> </div> <!-- 记住我选项 --> <div class="form-group"> <div class="main-checkbox"> <input type="checkbox" value="None" id="checkbox1" name="check"/> <label for="checkbox1"></label> </div> <span class="text">记住我</span> <!-- 登录按钮 --> <button type="button" class="btn btn-default" @click="loginBtn">立刻登录</button> </div> </form> </div> </div> </div> </div> </div> </template> <script> export default { data() { return { username: '', psd: '' }; }, methods: { // 输入框焦点事件 inputFocus() {}, // 输入框失去焦点事件 inputUserBlur() {}, inputPsdBlur() {}, // 登录按钮点击事件 loginBtn() { // 这里通常会发送登录请求到服务器，验证用户名和密码 // 如果验证成功，将用户名存入本地存储 localStorage.setItem('username', this.username); // 跳转到首页 this.$router.push('/home'); } } }; </script> ``` 当用户在登录页面成功验证后，我们将用户名存储在本地存储（例如使用 `localStorage`）。然后，我们可以通过路由守卫来检查用户是否已登录并具有有效的用户名。 在 `router/index.js` 文件中，我们可以设置全局前置守卫（Global Before Guards）或者组件内的路由守卫。这里以全局前置守卫为例： ```javascript import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); const router = new Router({ routes: [ { path: '/', redirect: '/login' }, // 默认重定向到登录页 { path: '/login', component: Login }, { path: '/home', component: Home, meta: { requiresAuth: true } } // 需要登录的页面 ] }); // 全局前置守卫 router.beforeEach((to, from, next) => { const username = localStorage.getItem('username'); // 获取本地存储的用户名 if (to.meta.requiresAuth && !username) { // 如果目标路由需要登录权限，且本地没有用户名 next('/login'); // 重定向到登录页 } else { next(); // 其他情况正常跳转 } }); export default router; ``` 这段代码中，我们在 `beforeEach` 钩子函数中检查了即将访问的路由 (`to`) 是否需要登录权限（通过 `meta.requiresAuth` 标志），如果需要且本地没有用户名，则重定向到登录页。 这样，我们就实现了一个简单的登录拦截机制，确保只有登录的用户才能访问特定的页面。当然，实际应用中可能需要更复杂的逻辑，例如处理 token、刷新令牌、路由白名单等，但以上代码提供了一个基础的实现方案。