Простая практика аутентификации с использованием токена в проекте vue

Vue.js
Простая практика аутентификации с использованием токена в проекте vue

Принцип работы

  1. Интерфейсная страница выполняет операцию входа в систему и отправляет имя пользователя и пароль на сервер;
  2. Сервер выполняет проверку и после прохождения генерирует токен, который содержит такую ​​информацию, как ключ, uid, время истечения, какие-то случайные алгоритмы и т. д., а затем возвращает его во внешний интерфейс.
  3. Фронтенд сохраняет токен локально, и для его сохранения рекомендуется использовать localstorage.При отправке запроса на сервер в следующий раз принесите локально сохраненный токен
  4. На стороне сервера проверьте токен и, если он пройдет, выполните соответствующие операции добавления, удаления, изменения и запроса и верните данные во внешний интерфейс.
  5. Если он будет передан, он вернет код ошибки, запросит сообщение об ошибке, а затем перейдет на страницу входа.

Конкретные шаги

Используемая технология: vuex + axios + localStorage + vue-router

  1. Добавьте настраиваемое поле сопряжения в маршрут входа, чтобы указать, требует ли страница аутентификации.
//router.js
{
    path: "/index",
    name: "index",
    component: resolve => require(['./index.vue'], resolve),
    meta: { 
        requiresAuth: true 
    }
}
  1. Настроить перехват маршрута
router.beforeEach((to, from, next) => {
    //matched的数组中包含$route对象的检查元字段
    //arr.some() 表示判断该数组是否有元素符合相应的条件, 返回布尔值
    if (to.matched.some(record => record.meta.requiresAuth)) {
        //判断当前是否有登录的权限
        if (!auth.loggedIn()) {
            next({
                path: '/login',
                query: { redirect: to.fullPath }
            })
        } else {
            next()
        }
    } else {
        next() // 确保一定要调用 next()
    }
})
  1. установить перехватчик
    Использование перехватчиков AXIOS используется для перехвата решения по всем запросам.
    Все последующие запросы будут нести токен.Мы используем перехватчик в axios и настраиваем перехватчик ответа http, когда внутренний интерфейс возвращает 401 (неавторизованный), позволяем пользователю снова выполнить операцию входа в систему.
// http request 拦截器
axios.interceptors.request.use(
    config => {
        if (store.state.token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
            config.headers.Authorization = `token ${store.state.token}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });

// http response 拦截器
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 返回 401 清除token信息并跳转到登录页面
                    store.commit(types.LOGOUT);
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}
                    })
            }
        }
        return Promise.reject(error.response.data)   // 返回接口返回的错误信息
});
  1. хранить токен локально
    cookies/local/sessionStograge можно использовать

Разница между тремя:

  • Если sessionStorage нельзя разделить между страницами, он будет очищен при закрытии окна.
  • localStorage может использоваться совместно с тем же доменом и является постоянным хранилищем
  • Токены в локальном/сеансовом хранилище не могут быть прочитаны с разных доменов, даже с субдоменов.
    Wearabound Используйте cookie.demo: Предположим, что когда пользовательская аутентификация через App.yourdomain.com выше вы генерируете токен и сохранены в .yourdomain.com в качестве файла cookie, то в YouromDain.com вы можете проверить файл cookie еще не оно уже существует , а если есть, то вы идете в App.youromdain.com. Этот токен будет действителен для поддельных процедур и после обычной процедуры (пока этот токен истек) Просто используйте cookie для хранения свойств, а не проверки.

О предотвращении XSS и XSRF:

  • Принцип XSS-атаки заключается в том, что злоумышленник вставляет исполняемый JavaScript-скрипт, который считывает файлы cookie браузера пользователя и передает их злоумышленнику.После того, как злоумышленник получит файлы cookie пользователя, он может выдать себя за пользователя.
  • Чтобы предотвратить XSS, при записи файлов cookie установите для HttpOnly значение true, и клиентские сценарии JavaScript не смогут считывать значение файлов cookie, что может эффективно предотвращать атаки XSS.
  • CSRF — это атака, которая захватывает доверенного пользователя для отправки неожиданных запросов на сервер.
  • Предотвращение CSRF: Поскольку токены также хранятся в локальном хранилище сеансов или в файлах cookie на стороне клиента, они также уязвимы для атак XSS. Поэтому при использовании токенов необходимо учитывать механизм истечения срока действия, иначе злоумышленник может постоянно удерживать учетную запись пользователя-жертвы.

Статьи по Теме:Краткое описание XSS и CSRF и меры предосторожности

    //login.vue
    methods: {
        login(){
            if (this.token) {
                //存储在本地的localStograge中
                this.$store.commit(types.LOGIN, this.token)
                //跳转至其他页面
                let redirect = decodeURIComponent(this.$route.query.redirect || '/');
                this.$router.push({
                    path: redirect
                })
            }
        }
    }

В вексе:

import Vuex from 'vuex';
import Vue from 'vue';
import * as types from './types'

Vue.use(Vuex);
export default new Vuex.Store({
    state: {
        user: {},
        token: null,
        title: ''
    },
    mutations: {
        //登录成功将, token保存在localStorage中
        [types.LOGIN]: (state, data) => {
            localStorage.token = data;
            state.token = data;
        },
        //退出登录将, token清空
        [types.LOGOUT]: (state) => {
            localStorage.removeItem('token');
            state.token = null
        }
    }
});

В ./types.js:

export const LOGIN = 'login';
export const LOGOUT = 'logout';

представлено здесь. . .

Категории