Vue Реализуйте бесплатную токенскую несущую секретную аутентификацию входа в систему, используйте (B)

Vue.js

предисловие

看文章之前，强烈建议先把项目拉取下来！案例来自小弟的开源项目，这是 Token 免密登录验证的前端实现。«Проект Гитхаб»

文章内容只是个人学习的一些总结经验，不具有权威性，强烈建议先移步：NodeJS (Express framework) реализует аутентификацию с помощью токена без пароля (1)

Принцип входа в систему без пароля по токену

Когда пользователь успешно входит в систему в первую очередь, бэкэн вернетToken, это значениеTokenОсновная функция заключается в идентификации личности пользователя. Эквивалентно паролю учетной записи. В нормальных условиях, когда клиентская часть отправляет запрос на серверную часть, серверная часть должна сначала определить личность пользователя, чтобы вернуть ему соответствующие данные. Но мы не можем просить пользователя вводить номер счета и пароль каждый раз, когда он делает запрос. Для простоты понимания вы можете думать об этом какToken≈ Пользователь вводит учетную запись и пароль (конечно, это не очень строго). получатьTokenПосле этого нужно поставитьTokenсуществуетCookieсередина. Когда вы затем отправляете запрос на сервер, вы начинаетеCookieвыигратьToken, передаваемый в заголовке запросаToken, готово!

Вы также можете использовать те, которые предоставляет vue-router.beforeEachкоординация методаTokenПростой контроль разрешений. Например:Token

Установите js-cookie и установите axios (http-библиотека)

js-cookieупрощениеcookieJS-библиотека для добавления, удаления, изменения и проверки,

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

//安装axios
npm i axios -S

js-cookie 和 axios 的使用比较简单，就不详细说明和例子一起看。 Подробная документация:"js-куки""аксиос"

Войти и получить токен

Давайте посмотрим непосредственно на пример

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: "/" });
        }
      });
    },

На данный момент у нас есть токен.

Настроить токен

KiteBlogНекоторые глобальные конфигурации в Axios сохраняютсяsrc\utils\request.js, так что-то вродеTokenТакие данные, которые должны нести почти все запросы, помещаются вrequest.jsявляется более подходящим.

axiosОбеспечивает функцию перехватчика. Подробный ход:перехватчик.这里只用到请求拦截器「axios.interceptors.request.use()」, как следует из названия, перехватывает запрос перед его отправкой, а затем изменяет запрошенные данные, такие как заголовок запроса, тело и другие данные. Я сказал раньше,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);
});

Это так, это легко, не так ли?

Где находится подходящее место для хранения токена? Печенье? хранилище сессий? Или локальное хранилище?

Я намеренно взглянул на характеристики файлов cookie, Sessionstorage и LocalStorage.

Сравнение времени отказа:

cookie: не установлен срок действия, когда вы закроете браузер, он будет очищен. Если вы установите время истечения срока действия, время истечения срока действия будет иметь преимущественную силу.

Sessionstorage: закрыть браузер будет ясно, вы не можете установить время истечения срока действия

localstorgae: он будет постоянно сохраняться в браузере без ручной очистки, и время истечения срока действия не может быть установлено.

Сравнение размера хранилища (различия в разных браузерах):

Файлы cookie: обычно 4k

localStorage: обычно 5M

sessionStorage: обычно 5M

Суммировать:

Каждый раз, когда делается запрос, браузер автоматически переносит данные cookie, а localStorage и sessionStorage — нет.

С точки зрения ограничения длины и использования полосы пропускания: файлы cookie действительно являются недостатком.

Дополнение: Безопасность: токен хранится в файле cookie, и информация о файле cookie будет автоматически включена при выполнении запроса, что может привести к атакам CSRF, поэтому необходимо выполнить защиту от CSRF. Когда сервер проверяет токен, лучше взять токен заголовка, а не напрямую получать информацию из файла cookie. Или используйте вместо этого localStorage.

Но с точки зрения установки времени истечения срока действия и входа в систему без пароля файлы cookie немного удобнее, чем Sessionstorag и Localstorgae. Мы можем напрямую определить, есть ли у файла cookie токен или нет.Если он есть, мы можем напрямую войти в фон управления веб-сайтом, не переходя снова на страницу входа, и позволить пользователю ввести пароль.

Это означает, что срок действия относится к сроку действия токена, хранящемуся в файле cookie браузера, а не к реальному времени токена в бэкэнде. Установка времени истечения срока действия файлов cookie браузера предназначена только для удобства внешнего использования.

Для интерфейса лучший способ - это до конца, но токен в печенье, без передовой обработки, ха-ха

Категории