基本实现思路是:
- 无论使用哪个url进入网站都会先触发router.beforeEach钩子
- 在router.beforeEach钩子中判断用户当前登录状态
- 若没有登录则保存用户进入的url并跳转到login授权页面
- login授权页面完成微信授权以及isLogin(用户登录状态)的写入实现用户登录
- 获取前面保存的用户进入url并跳转
1、首先安装 vue-cookie (或者直接用locaStorage/sessionStorage)
npm install vue-cookies --save
然后在mai.js全局引入
//导入cookies
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)
2、更改router/index.js
//导入cookies
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)
在路由里绑定login.vue 授权页面
routes: [
//授权
{
path: '/login',
name: 'login',
component: resolve => require(['../page/login/login.vue'], resolve),
meta: {title: '授权'}
},
]
router.beforeEach
注册一个全局前置守卫
vueRouter.beforeEach((to, from, next) => {
// 第一次进入项目
let isLogin = VueCookies.get('isLogin');
var code = util.util.prototype.getQueryString('code');
//未登录,并且进入地址不是登录页
if (!isLogin && to.path != "/login") {
VueCookies.set("beforeLoginUrl", to.fullPath,60*60*1); // 保存用户进入的url
next("/login");
return false;
}
//已登录,并且有code返回
else if(isLogin && code != null && to.path == "/login") {
next("/login");
return false;
}
next();
});
3、设置login.vue授权页面
login的方法是获取后台微信授权登录地址跳转的
methods: {
//用户登录授权 这里是请求后台获取微信授权登录地址跳转
login:function(){
var that = this;
var skipUrl = window.location.protocol +'//'+window.location.host+'/#/login';
that.Request.login(skipUrl)
.then(res =>{
if(res.code == 0){
console.log(res.data)
window.location.href=res.data;
}
})
},
},
created() {
//获取登录回来的code
var code = this.util.getQueryString('code');
//判断当前url中有没有 code
//未登录,而且没有code的情况下
if(this.$cookies.get('isLogin') == null && code == null){
//跳转微信登录
this.login();
}
//未登录,有code
else{
//存储登录状态 (1小时过期)
this.$cookies.set('isLogin',true,60*60*1);
//获取beforeLoginUrl,我们的前端页面
let url = this.$cookies.get('beforeLoginUrl');
console.log('跳转地址'+url)
//跳转
this.$router.push({path:url})
//删除 cookie中beforeLoginUrl
this.$cookies.remove('beforeLoginUrl');
}
}
基本就是这三步,搞定微信授权登录,此文章只是自己记录 ,不喜勿喷!