Решение для авторизации Vue WeChat (третья оптимизация)

WeChat

github:vue-wechat-auth

Раньше я был слишком молод, что писать [окончательное решение]. На этот раз проект мобильной электронной коммерции project vue провел большую оптимизацию. Все знают, что авторизацию каждый раз нужно публиковать онлайн, а локальная требует агента, что доставляет нам массу головной боли. Позже будет введен локальный метод прямой авторизации, который действительно очень ароматный.

Спустя несколько лет я в третий раз повысила авторизацию в WeChat, и с каждым разом мое мышление становилось все яснее, а когда мои знания станут шире и глубже, я верю, что будет и четвертый, и пятый раз. . .

Также оптимизировано:

  • обмен WeChat
  • keep-alive возвращает к последней просмотренной позиции
  • Все страницы vue-router содержат параметры
  • ...

Последующие действия будут продолжать делиться, и первая оптимизация — это оптимизация логики авторизации.

Сцены

Весь проект должен быть авторизован независимо от того, на какой странице вы находитесь.Как правило, необходимо выполнить проект общедоступной учетной записи WeChat H5.

Далее приступим, сначала клонируем и устанавливаем зависимости, не торопимся и сначала делаем подготовительную работу.

// 克隆项目
git clone https://github.com/sunniejs/vue-wechat-auth.git
//安装依赖
npm install

Реализовать локальную авторизацию WeChat

1. Инструменты

Для реализации локальной авторизации разработки необходимо использоватьИнструменты разработчика WeChat, веб-страница не может получить локальную авторизацию напрямую.

2. Разверните auth.html на сервере

Зачем развертывать auth.html?

Чтобы добиться авторизации WeChat, официальное лицо WeChat хочет, чтобы вы указали доменное имя для обратной страницы авторизации.Авторизованный адрес должен быть этим доменным именем, затемlocalhostОчевидно, все в порядке, что мне делать?

Когда мы переходим к авторизованному адресу WeChat, адрес, переносимый redirect_uri, является доменным именем обратного вызова WeChat, которое соответствует требованиям, таким какWoohoo.ABC.com/AU TH.HTML?Нет…Когда мы вернемся на эту страницу, мы перейдем к локальномуhttp://localhost:9018/#/?code=23456789** с нужным нам кодомВот и все! Итак, приступим.

1. Перейдите на общедоступную платформу WeChat->Разрешения интерфейса->Авторизация веб-страницы, чтобы получить основную информацию о пользователе->изменить, заполните доменное имя страницы обратного вызова авторизации, напримерwww.abc.com

2. WeChat требует, чтобыMP_verify_xxx.txtфайл на сервере. Просто следуйте подсказкам.

3. Развертываниеauth.html(В корневом каталоге проекта github), то же самое будетauth.htmlЗагрузить в каталог веб-сервера (или виртуального хоста), на который указывает доменное имя или путь (например: **woohoo.ABC.com/AU TH.HTML**…

существуетwww.abc.comРазвернуть на сервере под доменным именемauth.html, не обязательно корневой каталог, например:Woohoo.ABC.com/HeeHeeHee/AU TH.Contract…       

Здесь мы используемauth.htmlосновывается на GetWeixinCodeМодифицированы и исправлены некоторые ошибки, спасибо автору

  • Все переданные параметры не могут быть возвращены после авторизации.
  • проблема с ошибкой URL-адреса обратного вызова hash

3. Установите соответствующие переменные

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

.env.development

.env.staging

.env.production

VUE_APP_WECHAT_APPIDэто ваше приложение, установленное в файле .env.[environment]

VUE_APP_WECHAT_AUTH_URLваш адрес доступа к auth.html. Устанавливается в файле .env.[environment]

После настройки мы можем использовать его через process.env.

4. Внедрить методы, связанные с авторизацией WeChat

Путь к файлу: src/plugins/wechatAuth.js, в основном для объединения адресов перехода WeChat, чтобы получить параметры адреса и т. д.

Инкапсуляция метода, связанного с авторизацией WeChat. Ссылка здесь [vue-wechat-login], сделал простую модификацию, прямо в файле хука маршрутизацииpermission.jsиспользовать.

В разрешении.js для вызова некоторых методов, таких как:wechatAuth.returnFromWechat(to.fullPath);

5.permission.js защита маршрутизации

Основная логика реализована в src/permission.js.

Во-первых, теперь мы устанавливаем белый список авторизации whiteList, авторизация не проходит, или другие ошибки попадают на страницу 404.

  const whiteList = ['/404']  router.beforeEach(async (to, from, next) => {   // 在白名单，直接进入   if (whiteList.indexOf(to.path) !== -1) {      return next()    }
    // ....
  })

Затем мы устанавливаем loginStatus, чтобы указать статус входа в систему,0Если представитель не вошел в систему, вам нужно перейти на авторизованный адрес WeChat.

      // 设置回调地址，本地和线上不同  
     wechatAuth.redirect_uri = processUrl()
     await store.dispatch('user/setLoginStatus', 1)
      // 跳转完整的授权地址
      window.location.href = wechatAuth.authUrl

wechatAuth.authUrl адресhttps://open.weixin.qq.com/connect/oauth2/authorize...redirect_uri вызывает метод processUrl и возвращает разные адреса в зависимости от среды. Ранее мы упоминали, что авторизованный обратный адрес должен быть доменным именем авторизованной страницы, установленным официальной учетной записью WeChat, поэтому здесь есть два случая.

  • Локальная среда возвращает авторизованный адрес обратного вызова:

    // Изменяем локальную среду, чтобы получить код через auth.html
    if (process.env.NODE_ENV === "development") { return https://test.top1buyer.com/auth.html?backUrl=${window.location.href}; }

вprocess.env.VUE_APP_WECHAT_AUTH_URLЭто URL-адрес промежуточной страницы авторизации. backUrl следует за вамиместное развитиеадрес г.processUrl()вернутьWoohoo.ABC.com/AU TH.HTML?Нет…

  • Онлайн-среда возвращает обычный авторизованный адрес WeChat:

    const url = window.location.href;
    // Решаем проблему добавления повторяющегося кода и состояния к нескольким URL-адресам для входа const urlParams = qs.parse(url.split("?")[1]); пусть redirectUrl = URL; если (urlParams.code && urlParams.state) {
    delete urlParams.code;
    delete urlParams.state;
    const query = qs.stringify(urlParams); if (query.length) {
    redirectUrl = ${url.split("?")[0]}?${query}; } else { redirectUrl = ${url.split("?")[0]};
    }
    } return redirectUrl;

processUrl()Верните **адрес вашего проекта в Интернете, **не нужно переходить на среднюю страницу. Просто убедитесь, что доменное имя вашего проекта (например:www.abc.com/wxapp/), доменное имя указано в официальном аккаунте WeChat网页授权域名Список в порядке. Отсутствие перехода на среднюю страницу улучшит взаимодействие с пользователем.

Стартовый проект

После того, как необходимые параметры установлены, можно начинать

// 启动
npm run serve

После согласия вы увидите значение кода.

На этом основной процесс закончен.

Примечание: При успешной авторизации нужно обменять токен на код, так как нет связи с бэкграундом, поэтому я закомментировал это здесь

Следующая операция выполняется в vuex, и пользователи могут подключаться к фоновому интерфейсу в соответствии со своими потребностями.

/src/store/modules/user.js

Например, здесь мне нужно изменить информацию о пользователе с помощью кода для хранения информации о пользователе и токена.

 const actions = { 
   // 登录相关，通过code获取token和用户信息，用户根据自己的需求对接后台 
   loginWechatAuth({commit}, code) {     
   const data = {        code: code      } 
   return new Promise((resolve, reject) => {   
     loginByCode(data)
          .then(res => {
            // 存用户信息，token
          commit('SET_USERINFO', saveUserInfo(res.data.user))
            commit('SET_TOKEN', saveToken(res.data.token))
            resolve(res)
          })
          .catch(error => {
            reject(error)
          })
      })
    }, 
}

src/utils/request.js

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

Пользователь файла src/utils/cache.js для кэширования данных

 import cookies from 'js-cookie'import storage from 'good-storage'const LoginStatusKey = 'Login-Status' // 登录态 0未授权未登录 1授权未登录 2 登陆成功const TokenKey = 'Access-Token' // tokenconst UserInfoKey = 'User-Info' // 用户信息 {} {...}// 获取登录状态export function loadLoginStatus() {  return cookies.get(LoginStatusKey) || 0}// 保持登录状态export function saveLoginStatus(status) {  cookies.set(LoginStatusKey, status, {expires: 7})  return status}// 删除登录状态export function removeLoginStatus() {  cookies.remove(LoginStatusKey)  return ''}// 获取tokenexport function loadToken() {  return storage.get(TokenKey, '')}// 保存tokenexport function saveToken(token) {  storage.set(TokenKey, token)  return token}// 删除tokenexport function removeToken() {  storage.remove(TokenKey)  return ''}// 获取用户信息export function loadUserInfo() {  return storage.get(UserInfoKey, {})}// 保存用户信息export function saveUserInfo(userInfo) {  storage.set(UserInfoKey, userInfo)  return userInfo}// 删除用户信息export function removeUserInfo() {  storage.remove(UserInfoKey)  return {}}

адрес проекта

github:vue-wechat-auth

Кроме того, для ознакомления со структурой проекта см. [  vue-h5-template] На основе vue-cli4.0+webpack 4+vant ui+sass+rem схема адаптации+пакет axios. Если вам нужна только логика авторизации, просто поместите соответствующие файлы в свой проект.

Общая проблема

  • После подключения к Интернету продолжайте цикл, очистите кеш и закомментируйте src/utils/request.js.location.reload()отладка

обо мне

Дайте мне знать, если у вас возникнут проблемыissues 

Для получения дополнительных статей по технической тематике обратите внимание на общедоступный аккаунт «Front-end Girls' School».

Ответьте на «Front-end», вы можете присоединиться к «Front-end Fairy Group».

Вы также можете отсканировать и добавить WeChat ниже и отметить Сола и добавить группу внешнего общения для обмена и обучения.

Если это полезно для вас, пришлите мне звездочку, ваша звезда - движущая сила для меня, чтобы двигаться вперед (づ￣3￣)づ╭❤～

Категории