Vue 实现携带 Token 免密登录验证 ——Token使用（二）-一一网

前言

看文章之前，强烈建议先把项目拉取下来！案例来自小弟的开源项目，这是 Token 免密登录验证的前端实现。「项目Github」

文章内容只是个人学习的一些总结经验，不具有权威性，强烈建议先移步：NodeJS（Express框架）实现 Token 验证免密登录 (一)

Token 免密登录前端原理

在用户第一次登录成功的时候，后端会返回一个 Token，这个值Token 主要的作用就是用于识别用户的身份。相当于账号密码。正常情况下，前端给后端发送请求的时候，后端都需要先判断用户的身份，来返回相应的数据给用户。但我们不可能每次请求的时候都要用户输入一次账号和密码。为了便于理解，你可以看成 Token ≈ 用户输入账号和密码（当然这不太严谨）。获取到Token后，你需要把 Token 存在 Cookie中。接着向服务器发送请求时，你从 Cookie 中取出 Token，在请求头中携带上 Token ，就搞定了！

还可以用 vue-router 提供的beforeEach方法配合 Token进行简单的权限控制。例如：Token过期跳转到登录页。后面说权限控制的时候再写。

安装 js-cookie 和安装 axios （http库）

js-cookie一个简化 cookie增删改查的 JS 库，

//安装js-cookie
npm i js-cookie -S 

//安装axios
npm i axios -S 
复制代码

js-cookie 和 axios 的使用比较简单，就不详细说明和例子一起看。详细文档：「js-cookie」「axios」

登录并获取 Token

我们直接看例子

import Cookies from "js-cookie";
import { adminLogin } from "@/api/api";

submit() {
      this.$refs.form.validate(async (valid) => {
        // valid 为 false 时，表单校验通过（element-ui Form组件）
        if (!valid) return;
        //调用登录接口，并把用户的账号密码传给后端
        let res = await adminLogin(this.loginForm);
        if (res.code !== 0) {
          this.$message.error(res.msg);
        } else {
          //在返回的结果中获取到 token，并存放在 Cookie 中
          //Cookies.set(key,data) 是 `js-cookie`提供的存放 Cookie 的方法  
          Cookies.set("token", res.data.token); 
          //Cookies.set("token", res.data.token, { expires: 7 });
          //这里可以设置一下过期时间，最好比后端规定的时间早
          Cookies.set("name", res.data.name);
          Cookies.set("userId", res.data.userId || "");
          Cookies.set("role", res.data.role);
          //登录成功跳转到网站首页
          this.$router.replace({ path: "/" });
        }
      });
    },
复制代码

到这里我们就已经拿到 token了。

配置 Token

KiteBlog axios 一些全局的配置都存放在src\utils\request.js中，所以像Token这种几乎所有请求都需要携带的数据，放在request.js是比较合适的。

axios 提供了拦截器的功能。详细移步：拦截器。这里只用到请求拦截器「axios.interceptors.request.use()」，顾名思义，就是在发送请求前经进行拦截，然后修改请求的数据，例如：请求头（header）、body 等数据。前面说过，Token是存在请求头中的。

axios.interceptors.request.use((config) => {
	//排除登录接口，登录是不需要 Token 的，只有登录了才能获取到 Token
    if (config.url !== "auth/adminLogin") {
        //给请求头的设置Token, Cookies.get()用于获取存放在 Cookie 的 Token
		config.headers["authorization"] = `Bearer ${Cookies.get("token")}`;
	}
    //这一步是必须的！
	return config
}, (error) => {
	return Promise.reject(error);
});
复制代码