网站后台shopadmin输在哪里,网页报价表,兰州网站建设|兰州网站制作|兰州网站设计公司|兰州网络公司,好享购物官方网站购物在Vue 3中#xff0c;导航守卫#xff08;Navigation Guard#xff09;用于拦截路由的变化#xff0c;可以在用户访问页面前进行检查。结合Axios进行token认证机制时#xff0c;我们可以通过导航守卫在路由跳转时#xff0c;检查用户的认证状态#xff0c;确保用户有有效…在Vue 3中导航守卫Navigation Guard用于拦截路由的变化可以在用户访问页面前进行检查。结合Axios进行token认证机制时我们可以通过导航守卫在路由跳转时检查用户的认证状态确保用户有有效的token进行认证。
下面我将通过具体代码示例逐步讲解如何实现这一功能 文章目录 1. 安装必要的依赖2. 创建 axios 实例3. 在 router.js 中使用导航守卫4. 处理登录与登出逻辑5. 使用场景6. 总结 1. 安装必要的依赖
首先确保你已经安装了 axios这是我们用来发起 HTTP 请求的库。
npm install axios2. 创建 axios 实例
我们通常会创建一个封装了token认证逻辑的 axios 实例便于管理所有请求。
// src/utils/axios.js
import axios from axios;const instance axios.create({baseURL: https://api.example.com, // 设置基本的 API 地址timeout: 5000, // 设置请求超时
});// 请求拦截器
instance.interceptors.request.use(config {const token localStorage.getItem(token); // 从localStorage获取tokenif (token) {config.headers[Authorization] Bearer ${token}; // 在请求头中加入token}return config;
}, error {return Promise.reject(error);
});// 响应拦截器
instance.interceptors.response.use(response {return response;
}, error {if (error.response.status 401) {// 如果响应返回 401表示未授权可以跳转到登录页面window.location.href /login;}return Promise.reject(error);
});export default instance;3. 在 router.js 中使用导航守卫
接下来在 router.js 中配置路由的导航守卫检查每次路由跳转前的用户认证状态。
// src/router/index.js
import { createRouter, createWebHistory } from vue-router;
import axios from ../utils/axios; // 导入axios实例
import Home from ../views/Home.vue;
import Login from ../views/Login.vue;const routes [{path: /,name: Home,component: Home,meta: { requiresAuth: true }, // 需要认证的页面},{path: /login,name: Login,component: Login,},
];const router createRouter({history: createWebHistory(process.env.BASE_URL),routes,
});// 全局前置守卫
router.beforeEach(async (to, from, next) {const token localStorage.getItem(token);if (to.meta.requiresAuth) {if (!token) {// 如果目标路由需要认证且没有token跳转到登录页return next({ name: Login });}try {// 如果有token验证token是否有效const response await axios.get(/verify-token); // 假设后端提供了验证token的接口if (response.status 200) {next(); // token有效允许继续访问}} catch (error) {// token无效或请求失败跳转到登录页localStorage.removeItem(token); // 清除无效tokennext({ name: Login });}} else {next(); // 不需要认证的页面直接访问}
});export default router;4. 处理登录与登出逻辑
在用户登录时我们会获取token并将其存储在 localStorage 中登出时我们需要清除token。
// src/views/Login.vue
templatedivh1Login/h1form submit.preventhandleLogininput v-modelusername placeholderUsername /input v-modelpassword typepassword placeholderPassword /button typesubmitLogin/button/form/div
/templatescript
import axios from ../utils/axios;export default {data() {return {username: ,password: ,};},methods: {async handleLogin() {try {const response await axios.post(/login, {username: this.username,password: this.password,});const token response.data.token;localStorage.setItem(token, token); // 保存tokenthis.$router.push(/); // 登录成功后跳转到首页} catch (error) {console.error(Login failed:, error);}},},
};
/script// src/views/Home.vue
templatedivh1Welcome Home/h1button clickhandleLogoutLogout/button/div
/templatescript
export default {methods: {handleLogout() {localStorage.removeItem(token); // 清除tokenthis.$router.push(/login); // 跳转到登录页},},
};
/script5. 使用场景
这个 token 认证机制可以应用于任何需要用户登录的页面。例如用户在访问需要身份认证的页面如首页时首先会触发导航守卫在守卫中验证 token 是否有效。如果没有有效的 token用户会被重定向到登录页面。
场景总结
首页 (/): 需要 token 来验证用户身份。导航守卫检查 token 是否存在并有效。登录页 (/login): 用户输入用户名和密码后向后端发送请求获取并存储 token。全局登出: 用户登出时清除 token 并跳转到登录页。
6. 总结
通过上述步骤我们已经实现了
使用 axios 进行 token 的请求头设置与认证。在 Vue 3 的路由中使用导航守卫拦截认证逻辑。在登录时保存 token并在用户访问需要认证的页面时检查 token 是否有效。
这种认证机制可以有效地保证用户在访问敏感页面时必须通过认证而不会直接跳过认证过程。
