详解vue⽹页授权最终解决⽅案
vue⽹页授权，基于vue-cli3.0+webpack 4+vant ui + sass+ rem适配⽅案+axios，开发的授权⽅案。项⽬地址：
参考了[]，思路有些不同，本⽂基于进⼊所有页⾯都必须先授权的操作。
与之前写的授权不同之处
这次的逻辑全部在router的beforeEach进⾏，相较更加简洁明。之前是在⼀个中间页author.vue中，加上授权要跳转很多次vuejs流程图插件
在这⾥你能到
⽹页授权前端解决⽅案，
如何使⽤Natapp(ngrok)进⾏本地开发调试,
如何配置开发测试账号
关于测试账号和本地开发设置
由于⽂章过长这⾥[]记得回来哦~
⽹页授权
都设置好了那就开始⽹页开发第⼀步也是最重要的⼀步，⽹页授权
关于授权你⾸先要清楚的是，服务端要⽤到的是openid还是unionid，这两者的区别是，如果你要的是unionid，那么你需要在[去绑定测试账号。测试号的appId和appsecret在公众平台的测试号⾥。后台->开发者⼯具->公众平台测试帐号->进⼊
如果你不需要unionid，那这个你就可以省略，如果服务端是需要unionid的那不绑定的话授权会把报错的。记得问⼀下服务端开发⼈员哦。
开发
⾸先我们看下授权的流程图，关于
前端需要做的是
，拼接授权地址，redirect_uri就是你的当前地址，关于appid有些⼈是通过接⼝获取的，我这⾥就直接写在项⽬全局变量⾥了VUE_APP_WECHAT_APPID，⽤户授权成功后会携带code和status跳回来
open.weixin.qq/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${direct_uri}&response_type=code&scope=${
this.scope}&state=${this.state}#wechat_redirect
第⼆步，访问登录接⼝，将code传给服务端，⼩哥哥进⾏⼀系列的操作，通过，，返回是否登录成功，成功后返回⽤户信息和登录令牌 token
在permission.js中路由拦截进⾏这⼀系列操作，代码注释很详细了
permission.js
import router from './router'
import store from './store'
import getPageTitle from '@/utils/get-page-title'
import wechatAuth from './plugins/wechatAuth' // 登录插件
const qs = require('qs')
router.beforeEach((to, from, next) => {
const loginStatus = s.loginStatus)
console.log('loginStatus=' + loginStatus)
console.log('token=' + ken)
// 页⾯标题
document.title = a.title)
if (loginStatus === 0) {
// 未授权登录跳转到授权登录页⾯
const url = window.location.href
// 解决重复登录url添加重复的code与state问题
const parseUrl = qs.parse(url.split('?')[1])
let loginUrl
if (de && parseUrl.state) {
de
delete parseUrl.state
loginUrl = `${url.split('?')[0]}?${qs.stringify(parseUrl)}`
} else {
loginUrl = url
}
// 设置授权回调地址
// ⽆论拒绝还是授权都设置成1
store.dispatch('user/setLoginStatus', 1)
// 跳转到授权页⾯
window.location.href = wechatAuth.authUrl
} else if (loginStatus === 1) {
// ⽤户已授权，获取code
try {
/
/ 通过回调链接设置code status
} catch (err) {
// 失败，设置状态未登录，刷新页⾯
store.dispatch('user/setLoginStatus', 0)
}
// 同意授权 to.fullPath 携带code参数，拒绝授权没有code参数
const code = de
if (code) {
// 拿到code 访问服务端的登录接⼝
store
.dispatch('user/loginWechatAuth', code)
.then(res => {
// 成功设置已登录状态
store.dispatch('user/setLoginStatus', 2)
next()
})
.catch(() => {
// 失败，设置状态未登录，刷新页⾯
store.dispatch('user/setLoginStatus', 0)
})
} else {
store.dispatch('user/setLoginStatus', 0)
}
} else {
// 已登录直接进⼊
next()
}
})
登录成功后存⽤户信息，token。访问所有的接⼝的时候都会在header携带token，如果token失效了，服务端会返回401，做退出操作，删除登录状态，⽤户信息，token，刷新页⾯重新进⼊。
request.js
// 登录超时，重新登录
if (res.status === 401) {
store.dispatch('user/fedLogOut').then(() => {
})
}
⽤户登录后将token和⽤户信息存⼊storage中，登录状态设置到cookie⾥，store user中主要是进⾏⽤户信息存贮获取删除的操作
store/modules/user.js
import { loginByCode } from '@/api/user'
import {
saveToken,
saveLoginStatus,
saveUserInfo,
removeToken,
removeUserInfo,
removeLoginStatus,
loadLoginStatus,
loadToken,
loadUserInfo
} from '@/utils/cache'
const state = {
loginStatus: loadLoginStatus(), // 登录状态
token: loadToken(), // token
userInfo: loadUserInfo() // ⽤户登录信息
}
const mutations = {
SET_USERINFO: (state, userInfo) => {
state.userInfo = userInfo
},
SET_LOGIN_STATUS: (state, loginStatus) => {
state.loginStatus = loginStatus
},
SET_TOKEN: (state, token) => {
}
}
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(ken))
resolve(res)
})
.catch(error => {
reject(error)
})
})
},
// 设置状态
setLoginStatus({ commit }, query) {
if (query === 0 || query === 1) {
// 上线打开注释，本地调试注释掉，保持信息最新
removeToken()
removeUserInfo()
}
// 设置不同的登录状态
commit('SET_LOGIN_STATUS', saveLoginStatus(query))
},
/
/ 登出
fedLogOut() {
// 删除token，⽤户信息，登陆状态
removeToken()
removeUserInfo()
removeLoginStatus()
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
在根⽬录下.env开头的三个⽂件中设置appID
VUE_APP_WECHAT_APPID='12345678'复制代码
授权再也难不住我了，如果哪⾥有问题希望⼤家给我留⾔纠正，互相学习
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。