axios 登录并跳转

《axios 登录并跳转》

在基于前端框架（如Vue、React等）进行开发时，使用axios实现登录功能并将用户跳转到指定页面是一个常见的需求。解决方案是：通过axios发送登录请求，根据服务器返回的状态判断登录是否成功，若成功则保存用户信息（如token），再利用前端路由（例如vue - router或react - router）实现页面跳转。

一、基本思路

1. 准备工作

确保项目中已经安装了axios和前端路由相关的包。以vue项目为例，如果使用的是vue - cli创建的项目，一般axios和vue - router都比较容易集成。

2. 登录页面组件

html

    <div class="login-container">
        
        
        <button>登录</button>
    </div>
</p>


import axios from 'axios';
export default {
    data() {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        handleLogin() {
            axios.post('/api/login', {
                username: this.username,
                password: this.password
            }).then(res => {
                if (res.data.code === 200) {
                    // 假设服务器返回code为200表示登录成功
                    localStorage.setItem('token', res.data.token);
                    this.$router.push({ path: '/home' });
                } else {
                    alert('登录失败');
                }
            }).catch(err => {
                console.log(err);
                alert('登录请求出错');
            })
        }
    }
}


<p>

二、其他思路

1. 使用async - await优化代码

可以将上面的handleLogin方法用async - await改写，使代码看起来更加简洁直观。
javascript methods: { async handleLogin() { try { const res = await axios.post('/api/login', { username: this.username, password: this.password }); if (res.data.code === 200) { localStorage.setItem('token', res.data.token); this.$router.push({ path: '/home' }); } else { alert('登录失败'); } } catch (err) { console.log(err); alert('登录请求出错'); } } }

2. 考虑的应用

为了更好地处理请求和响应，可以在axios中设置。比如在请求中添加一些通用的配置，在响应中对不同状态码进行统一处理。
``javascript // 添加请求 axios.interceptors.request.use(config => { // 在发送请求之前做些什么 config.headers['Authorization'] =Bearer ${localStorage.getItem('token')}`;
return config;
}, error => {
// 对请求错误做些什么
return Promise.reject(error);
});

// 添加响应
axios.interceptors.response.use(response => {
// 对响应数据做点什么
return response;
}, error => {
if (error.response.status === 401) {
// 处理未授权的情况，例如跳转到登录页
this.$router.push({ path: '/login' });
}
// 对响应错误做点什么
return Promise.reject(error);
});
```
这样当遇到未授权（401）的情况时，能够自动跳转到登录页面，提高用户体验。