Vue实现登录功能全套详解（含封装axios）

最新推荐文章于 2023-12-06 20:00:07 发布

m0_67391907

最新推荐文章于 2023-12-06 20:00:07 发布

阅读量582

点赞数

分类专栏：面试阿里巴巴文章标签： vue.js 前端 javascript 运维开发语言

本文链接：https://blog.csdn.net/m0_67391907/article/details/126812273

版权

本文详细介绍了在Vue项目中实现登录功能的步骤，包括安装插件、创建store、封装axios、路由拦截和登录页面的实际应用。关键点包括使用qs插件处理请求参数，token的存储和验证，以及接口的统一管理。通过axios.get()和axios.post()的使用区别，阐述了提交数据的不同方式。最后提到了路由拦截和登录页面的实战应用。

摘要由CSDN通过智能技术生成

Vue项目中实现登录大致思路：

1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码

2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token

3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面

4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面

5、每次调后端接口，都要在请求头中加token

6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401

7、如果前端拿到状态码为401，就清除token信息并跳转到登录页面

用到的关键文件

一、安装插件

npm install axios; // 安装axios
npm install vuex  // 安装vuex

补充：

创建store是必须的！
token一定要存在storage缓存中，否则刷新一下，store会重新被加载，token就没了；
那存在store是不是多余了，这个也是为了数据统一管理吧，也是数据可视化，因为缓存中的数据代码中是看不见的。（为了代码更容易让别人理解所以加上vuex，不加也不影响做登录）

二、创建store

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// 用Vuex.Store对象用来记录token
const store = new Vuex.Store({

  state: {
    // 存储token
    token:"",
    userName:"" // 可选
  },
  getters: {
	getToken(state){
		return state.token || localStorage.getItem("token") || "";
	}
  },
  mutations: {
    // 修改token，并将token存入localStorage
    setToken(state,token) {
      state.token = token;
      localStorage.setItem('token', token);
      console.log('store、localstorage保存token成功！');
    },
    delToken(state) {
      state.token = "";
      localStorage.removeItem("token");
    },
    // 可选
    setUserInfo(state, userN