написать впереди
В качестве среды разработки проект использует Vue.Есть две ситуации, когда пользователи просматривают страницу:
- Во-первых, пользователям необходимо войти в систему, прежде чем они смогут продолжить просмотр;
- Во-вторых, пользователи могут свободно просматривать сайты без входа в систему.
Страницы, не требующие входа пользователя в систему, могут содержать операции, для которых требуется информация о пользователе. В этом случае последующие операции могут выполняться только после входа пользователя в систему. Следовательно, необходимо проводить различие между политиками входа в систему авторизации.
идеи
Вообще говоря, страница H5, которую мы разработали для WeChat, аутентифицируется при входе на страницу, и пользователь должен войти в систему, прежде чем продолжить просмотр. Однако из-за требований к продукту нам необходимо разделить политики аутентификации разных страниц для этого проекта и разработать их в соответствии с общими и специальными:
- Как правило, пользователи заходят на страницу в первый раз, чтобы потребовать от пользователей несанкционированный доступ, процесс несанкционированного доступа в соответствии с обычным микроканалом, после входа в систему пользователь продолжает просматривать.
- В особых случаях настройте белый список для страниц, которые не требуют входа пользователя.Пока вы вводите маршрут, который существует в белом списке, вы не входите в функцию, которая определяет статус входа пользователя, и страница отображается напрямую.
- Для операций, требующих пользовательской информации, когда пользователь не вошел в систему, согласно моему нынешнему пониманию, даже если он основан на тихой авторизации WeChat, страницу необходимо снова обновить, и невозможно по-настоящему авторизовать и продолжить работу пользователя. Поэтому я решил дать пользователю более дружественную подсказку на внешнем уровне, чтобы пользователь мог понять процесс авторизации. Недостаток заключается в том, что предыдущая операция запускает только вход в систему авторизации. После входа в систему авторизации пользователю необходимо действовать опять таки.
// routerRule.js
export default function routerRule (router, whiteList = []) {
// other codes...
router.beforeEach( (to, from, next ) => {
// 因为授权登录涉及异步操作，因此使用promise，成功的回调中调用next函数
new Promise((resolve, rejects) => {
if ( whiteListRouter.indexOf(to.path) !== -1 ) {
resolve()
return
}
// 常规页面授权登录过程
if (hasToken()) {
// codes，获取用户信息并且跳转所需跳转的页面
} else {
// 判断用户是否已经进行微信授权
if (hasAuthed()) {
// 进行过微信授权之后，重定向回来的url中包含了微信的授权信息，可以将url上截取的参数发送到服务器，换取用户的token，随后进入上述有token时候的步骤
getWechatUserInfo().then(res => {
resolve()
})
} else {
// 用户尚未进行微信授权，则调用微信授权的方法，进行授权登录。
getWechatAuth()
}
}
}).then( res => {
next()
})
})
router.afterEach(( to, from ) => {
wxShare({ title: to.meta.title, desc: to.meta.shareDesc, link: to.meta.shareLink, logo: to.meta.shareLogo})
})
}
Этот проект связывает информацию WeChat пользователя с информацией пользователя этого сайта, когда пользователь связывает WeChat в первый раз.Поэтому, после получения информации авторизации пользователя WeChat, может быть получен токен пользователя.Информация о других пользователях этого сайта.
Обработка операций, требующих разрешения на странице входа
Согласно приведенной выше логике, после входа в белый список, вся функция была возвращена и не войдет в следующий процесс аутентификации. Однако, если на такой странице выполняется операция, требующая разрешений, необходимо инициировать процесс входа в систему авторизации, а после авторизации информация о пользователе должна быть получена вместе.
// checkLogin.js
export function checkLogin({ redirectUrl, wxAuthLoading, wxAuthLoaded, callback } = {}) {
if (getToken()) {
// ...
callback && callback()
} else {
// 提示用户正在授权中
wxAuthLoading && wxAuthLoading()
getWechatAuth( redirectUrl || window.location.href ).then( res => {
// 授权完毕，提示用户授权成功
wxAuthLoaded && wxAuthLoaded()
})
}
}
В то же время нам нужно добавить некоторые операции в белый список маршрутизации
// routerRule.js
export default function routerRule (router, whiteList = []) {
// other codes...
router.beforeEach( (to, from, next ) => {
// 因为授权登录涉及异步操作，因此使用promise，成功的回调中调用next函数
new Promise((resolve, rejects) => {
if ( whiteListRouter.indexOf(to.path) !== -1 ) {
// 如果已经进行微信授权但是没有token值的，就调用以下函数获取token值
if ( !hasToken() && hasAuthed() ) {
getWechatUserInfo().then(res => {
resolve()
})
}
resolve()
return
}
// 常规页面授权登录过程
if (hasToken()) {
// codes，获取用户信息并且跳转所需跳转的页面
} else {
// 判断用户是否已经进行微信授权
if (hasAuthed()) {
// 进行过微信授权之后，重定向回来的url中包含了微信的授权信息，可以将url上截取的参数发送到服务器，换取用户的token，随后进入上述有token时候的步骤
getWechatUserInfo().then(res => {
resolve()
})
} else {
// 用户尚未进行微信授权，则调用微信授权的方法，进行授权登录。
getWechatAuth()
}
}
}).then( res => {
next()
})
})
// other codes...
}
ямы и несовершенства
- В этой схеме после авторизации пользователя перед переходом на маршрут необходимо сначала получить информацию о пользователе, в противном случае информация об авторизации WeChat по URL-адресу будет потеряна, и получение информации о пользователе не удастся.
- Недостаток этого решения заключается в том, что оно требует от разработчиков добавления решения checkLogin ко всем операциям, требующим разрешений, на странице без входа в систему. Поскольку эта операция, требующая разрешения, обычно отправляет асинхронные запросы, если вы не рассматриваете возможность сокращения ненужных асинхронных запросов, вы можете единообразно настроить перехватчик для метода запроса, чтобы определить код, возвращаемый серверной частью.Если пользователь не входит в систему с помощью код, выполняется авторизация WeChat. Этот метод более удобен для процесса разработки, но он будет отправлять некоторые ненужные запросы к бэкенду, когда пользователь не авторизован, что не очень хорошо.
Это незрелое решение, о котором я подумал в процессе разработки. Если есть лучший способ, пожалуйста, дайте мне знать, спасибо!