在使用Vue开发前端项目时，通常会使用axios进行后端接口调用，而在实现用户登录后，我们通常需要对未登录的用户进行拦截，以保护系统的安全性。接下来将讲解如何使用Vue+axios实现前端登录拦截的两种方式:路由拦截和http拦截。
在Vue项目主入口文件中，通过VueRouter的beforeEach方法实现全局路由拦截，以下是示例代码:
router.beforeEach((to, from, next) => {
const isLogin = localStorage.token ? true : false; // 判断用户是否登录
if (to.path == "/login") {
next();
} else {
// 未登录则跳转到登录页面
isLogin ? next() : next("/login");
}
});
Vue Router提供的beforeEach方法，用于拦截全局路由，可以在这个拦截器中编写自己的业务逻辑。在上述代码中，通过判断路由是否为登录路由，并通过缓存中的token判断用户是否登录，若未登录，则跳转至登录页面，反之则放行。
在请求登录接口成功后，将返回的token保存至localStorage中，示例代码如下：
axios.post('XXX/login', {username, password}).then(res => {
localStorage.token = res.data.token;
// 跳转至首页
this.$router.push('/');
}).catch(error => {
console.log(error);
})
该代码用于发送登录请求，请求成功后将返回的token保存到localStorage中，以备全局路由守卫使用。另外，在保存成功后，通过this.$router.push('/')跳转至应用的主页或者/dashboard。
在Vue项目中，我们可以将全局路由守卫写在main.js中，以下是一个简单示例：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false;
// 全局路由拦截
router.beforeEach((to, from, next) => {
const isLogin = localStorage.token ? true : false; // 判断用户是否登录
if (to.path == "/login") {
next();
} else {
isLogin ? next() : next("/login");
}
});
new Vue({
router,
render: h => h(App),
}).$mount('#app')
在Vue项目中，我们通常需要对axios进行全局配置，以便在后续的代码中调用，通过以下示例代码，创建一个axios实例：
import axios from 'axios'
const instance = axios.create({
baseURL: 'http://localhost:5000',
timeout: 5000,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
});
export default instance
该代码中，通过axios.create()创建一个axios实例，在创建时可以设置一些配置项，例如url携带的basePath、timeout、header信息等。
通过设置instance的interceptors.request.use()方法，对请求进行拦截，示例代码如下：
import instance from './axios'
instance.interceptors.request.use(config => {
const token = localStorage.token;
token && (config.headers.Authorization = token);
return config;
}, error => {
return Promise.reject(error);
});
在该代码中，设置了请求拦截器，在请求发送前，拦截器会通过localStorage.token获取保存在本地的登录token，若token存在，则将该token添加至请求头中，这样在后端服务接收到请求后，可以从头部信息获取该用户的登录凭证。
在HTTP返回结果时，后端可能返回一些常见的错误码，例如401，即为用户未授权错误，此时我们需要对该错误进行拦截，并提示用户重新登录。以下示例代码用于拦截401错误：
import instance from './axios'
instance.interceptors.response.use(response => {
return response;
}, error => {
const { response } = error;
if (response) {
switch (response.status) {
case 401:
// 重新跳转到登录页面
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
})
break;
case 500:
// 服务器错误
break;
default:
break;
}
}
return Promise.reject(error);
});
在该代码中，设置了响应拦截器，在响应时，如果服务器返回401错误码，则会跳转到登录页面。其他错误码暂不处理。
下面是一个使用vue+axios的登录拦截HTTP拦截器的完整示例：
import axios from 'axios'
import router from './router'
const instance = axios.create({
baseURL: 'http://localhost:5000',
timeout: 5000,
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
});
instance.interceptors.request.use(config => {
const token = localStorage.token;
token && (config.headers.Authorization = token);
return config;
}, error => {
return Promise.reject(error);
});
instance.interceptors.response.use(response => {
return response;
}, error => {
const { response } = error;
if (response) {
switch (response.status) {
case 401:
// 重新跳转到登录页面
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
})
break;
case 500:
// 服务器错误
break;
default:
break;
}
}
return Promise.reject(error);
});
export default instance
在代码中，我们除了创建了axios实例，设置响应和请求拦截器，还将router引入，并在响应拦截器的401错误处理中，通过router.replace()重定向至登录页面。
总结
综上所述，Vue + Axios 实现前端登录拦截的两种方式 (路由拦截和HTTP拦截)已经讲解完毕。根据具体情况，可以灵活选择适合的方式来控制页面的访问权限和登录拦截。通过以上两个实现方式，可以快捷并且简洁地保护 Web 应用程序的安全性。
本文链接：http://task.lmcjl.com/news/8788.html