coderisimo

Вот вам простой пример

axios.defaults.headers.common['Auth-Token'] = 'new token';

Внутренне v-model использует разные свойства и генерирует разные события для различных элементов ввода:

элементы для ввода текста и многострочного текста используют свойство value и событие input;
чекбоксы и радиокнопки используют свойство checked и событие change;
выпадающие списки используют свойство value и событие change.

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

Когда вы его получаете - это время его создания. Далее, перед оправкой находите разность между текущим временем и временем его создания.

А можно и не проверять время жизни токена. Просто если в ответе сервера получили ошибку -
if (err.response.status === токен экспайред ....
- получаете новый при помощи рефреш токена.

Тоже воевал с такими "кашами". Все же при полном разделении бэка и фронта разработку вести удобнее, и все более логично. Сейчас использую quasar framework (это тоже vue). Yii приложение работает как rest application (отдает только данные, обработка стандартных запросов из коробки), а фронт на quasar. Hot reload webpack и прочие плюшки такого подхода радуют.
Основная идея : я настроил конфиг вебпака так, что после сборки он выгружает весь код в папку Yii web. Точка входа в одном представлении - app. Оно тоже модифицируется -

//таким образом в app.php указываются ссылки на  сгенерированные js файлы
   afterBuild() {
        let writeableStream = fs.createWriteStream('../views/site/app.php');
    //......
        fs.createReadStream('../web/index.html').pipe(writeableStream);
      },

Соответственно, мы получаем обычное Yii. Что радует - при таком подходе сессии, csf токены - все работает как обычно. Только для локальной разработки , когда vue приложение запускается через свой сервер (мы же работаем локально через cli) - приходится получать csf самостоятельно.

можно сделать просто . общая идея :

<span class="textbox"> 
        Это неизменяемый  текст
        <input  v-model="message" type="text" name="url" />
    </span>

Например вот так.

Именно с этим компонентом не работал, но все кажется очевидным.
К примеру, у вас есть

onRowSelected(items) {
        this.selected = items
      },

где вы можете перед this.selected = items фильтровать items (это же массив!) и оставлять в нем только те строки, которые ИМЕЮТ ПРАВО быть выделенными.

Решение : (надеюсь :) . )

В процессе билда помещаем готовые папки css,fonts,js,statics в папку web yii. Там же должен присутствовать Yii-шный файл index.php. Содержимое полученного в результате билда index.html помещаем в одно из пустых представлений Yii. Туда же нужно добавить <?= Html::csrfMetaTags() ?> .
Все вышеописанные операции происходят автоматом в процессе билда и выполняются webpack-ом. Там , вообще можно написать все , что вам угодно. Копирование, добавление кода в файлы И так далее. Представление , которое мы создали открывается при старте нашего приложения.

После вышеописанных манипуляций в теле странички, где размещается SPA будут присутствовать метатеги с srf :
<?= Html::csrfMetaTags() ?>
далее , перед стартом Vue (например в mounted() {.....} ) нужно извлечь csrf из мета тэгов страницы и добавить его в axios.defaults.headers.common

Это будет работать для приложения , которое работает обычным образом. Версия запущенная через webpack ничего не знает о <?= Html::csrfMetaTags() ?> . Соответственно , пишем экшн getToken, который возвращает нам csrf. Это нужно для разработки, чтобы приложение работало с webpack и его плюшками.

public function actionGetToken()
    {
        return yii:: $app->getRequest()->getCsrfToken();
    }

Этот экнш не требует csrf (считается безопасным так , как он GET ). Далее во vue (например в mounted() {.....} ) , в зависимости от ENV при старте приложения берем csrf либо из метатегов , либо вызывав экшн getToken. Это работает, но....
После того как мы проходим процедуру аутентификации сессия обновляется и старый csrf превращается в тыкву. Так же он обновляется всякий раз, когда мы загружаем новую страничку. В данном случае у нас SPA и многократная загрузка новых станиц нам не грозит.Так что единственное , что еще нужно сделать - сразу после аутентификации обновить csrf токен. Я просто возвращаею его, как результат успешного выполнения login.
Снова обновляем axios.defaults.headers.common актуальным csrf , и на этом все. Остальные запросы подписанные данным токеном работают нормально.
Экшн getToken нужен только при локальной разработке и на проде должен быть выключен.

И попутный вопрос хватит ли авторизации без refresh токена?

.
Этот токен не просто так используется.

1) Вы не заставляете пользователя логиниться каждый раз, когда истечет срок действия основного токена. Токен обновляется без участия пользователя с помощью рефреш токена.
2) Если у вас сперли токены - ваш рефреш токен становится неактуальным , сайт требует чтобы вы прошли аутентикацию с логином и паролем. После успешного прохождения данной процедуры вам выдается новая пара токен и рефреш токен. Соответственно, похищенный у вас ранее рефреш токен превращается в тыкву. Так что когда обычный токен у злоумышленника протухнет , он не сможет получить новый.

C flask дела не имел (но с Larvel или Django для бэкэнда по сути все то же) . Сейчас такие вещи делаются, как два приложения. Вот, как мне кажется неплохой пример.
перевод полезной статьи

Здесь не валят все в кучу, а используют бек и фронт раздельно. Что , как раз кошерно ))