vue+axios 前端实现登录拦截的两种方式（路由拦截、http拦截）

vue+axios 前端实现登录拦截的两种方式

在使用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

在请求登录接口成功后，将返回的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')

方式二：HTTP拦截

步骤一：创建axios实例

在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信息等。

步骤二：设置HTTP请求拦截器

通过设置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响应拦截器

在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 应用程序的安全性。