vue+vue-cookie 微信授权登录

 

 

 

基本实现思路是：

• 无论使用哪个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{
			    //由于怕用户一直返回到授权页面，
				//所以在授权页面判断是否已经获取用户信息
				//如果已经获取用户信息则跳转到首页
				if(this.$cookies.get('openId') == undefined){
					//获取用户信息 （这是后台一个获取用户信息接口）
                    //这个接口里面保存了用户信息  this.$cookies.set('openId',xxxx)
					this.getAccessTokenFun(code)
						.then(res =>{
							//存储登录状态   （1小时过期）
					        this.$cookies.set('isLogin',true,60*60*1);
					        //获取beforeLoginUrl，我们的前端页面
					        let url = this.$cookies.get('beforeLoginUrl');
				            //跳转  用window.location.href 地址栏不会带code
				            //this.$router.push({path:url});
							var http = window.location.protocol;
				            var doMain = window.location.host;
				            window.location.href = http+'//'+doMain+'#'+url;
				            //删除 cookie中beforeLoginUrl
				            this.$cookies.remove('beforeLoginUrl');
						})
				}else{
					//跳回首页
					this.$router.push({path:'/'});
				}
			}
			
}

基本就是这三步，搞定微信授权登录，此文章只是自己记录 ，不喜勿喷！