我要评论在vue 3中，导航守卫（navigation guard）用于拦截路由的变化，可以在用户访问页面前进行检查。结合axios进行token认证机制时，我们可以通过导航守卫在路由跳转时，检查用户的认证状态，确保用户有有效的token进行认证。
1. 安装必要的依赖
首先，确保你已经安装了 axios，这是我们用来发起 http 请求的库。
npm install axios
2. 创建 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获取token
if (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'); // 清除无效token
next({ name: 'login' });
}
} else {
next(); // 不需要认证的页面，直接访问
}
});
export default router;
4. 处理登录与登出逻辑
在用户登录时，我们会获取token并将其存储在 localstorage 中；登出时，我们需要清除token。
// src/views/login.vue
<template>
<div>
<h1>login</h1>
<form @submit.prevent="handlelogin">
<input v-model="username" placeholder="username" />
<input v-model="password" type="password" placeholder="password" />
<button type="submit">login</button>
</form>
</div>
</template>
<script>
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); // 保存token
this.$router.push('/'); // 登录成功后跳转到首页
} catch (error) {
console.error('login failed:', error);
}
},
},
};
</script>
// src/views/home.vue
<template>
<div>
<h1>welcome home</h1>
<button @click="handlelogout">logout</button>
</div>
</template>
<script>
export default {
methods: {
handlelogout() {
localstorage.removeitem('token'); // 清除token
this.$router.push('/login'); // 跳转到登录页
},
},
};
</script>
5. 使用场景
这个 token 认证机制可以应用于任何需要用户登录的页面。例如，用户在访问需要身份认证的页面（如首页）时，首先会触发导航守卫，在守卫中验证 token 是否有效。如果没有有效的 token，用户会被重定向到登录页面。
场景总结：
- 首页 (
/): 需要 token 来验证用户身份。导航守卫检查 token 是否存在并有效。 - 登录页 (
/login): 用户输入用户名和密码后，向后端发送请求，获取并存储 token。 - 全局登出: 用户登出时，清除 token 并跳转到登录页。
6. 总结
通过上述步骤，我们已经实现了：
- 使用
axios进行 token 的请求头设置与认证。 - 在 vue 3 的路由中使用导航守卫拦截认证逻辑。
- 在登录时保存 token，并在用户访问需要认证的页面时检查 token 是否有效。
这种认证机制可以有效地保证用户在访问敏感页面时，必须通过认证，而不会直接跳过认证过程。
到此这篇关于vue3中导航守卫结合axios实现token认证机制的文章就介绍到这了,更多相关vue3 token认证机制内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论