vue h5 微信授权
1.首先在main.js 中判断是否存在token,如果没有token 而且当前页面不是author(授权页面),保存用户进入的url,跳转至授权页面,那如果本地有token,发送请求获取用户数据router.beforeEach((to, from, next) => {//第一次进入项目console.log(window.localStorage.getItem...
·
1.首先在main.js 中判断是否存在token,如果没有token 而且当前页面不是author(授权页面),保存用户进入的url,跳转至授权页面,那如果本地有token,发送请求获取用户数据
router.beforeEach((to, from, next) => {
// 第一次进入项目
console.log(window.localStorage.getItem("user_token"))
if (to.meta.requireAuth){
let token = window.localStorage.getItem("user_token");
let userInfo=window.localStorage.getItem("userInfo");
console.log(to)
if (!token && to.path != "/author") {
window.localStorage.setItem("beforeLoginUrl", to.fullPath); // 保存用户进入的url
next("/author");
return false;
} else if (token && !userInfo) {
console.log(token)
fetchGet('login',{openid:token})
.then((data) => {
console.log("成功")
window.localStorage.setItem("userInfo", JSON.stringify(data.data.data));
next();
})
.catch((err)=>{
console.log("失败")
window.localStorage.removeItem("user_token");
window.location.reload()
return false;
})
}
next();
}else{
next();
}
});
2.进入author.vue,首先判断当前链接有没有token 如果没有,就请求后端接口,后端重定向链接回来,会带token及msg 然后截取链接中的token保存
<!-- author -->
<template>
<div class="bg">
</div>
</template>
<script>
import {GetQueryString} from '../utils/mixin';
export default {
//import引入的组件需要注入到对象中才能使用
components: {
},
data() {
//这里存放数据
return {
token: '',
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
async ReturnGetCodeUrl() {
//let {data} = await getWxAuth({});
this.$fetchGet('login',{})
.then((data) => {
console.log(data)
// if (data.status == 200) {
window.location.href = data.data;
// }
})
.catch((err)=>{
console.log(err)
})
},
},
//生命周期 - 创建完成(可以访问当前this实例)
created() {
this.token = window.localStorage.getItem("user_token");
//判断当前的url有没有token参数,如果不存在那就跳转到微信授权的url
//就是前面说的ReturnGetCodeUrl方法
console.log(GetQueryString("token"))
if (!GetQueryString("token")) {
this.ReturnGetCodeUrl();
} else {
//如果有token,如http://www.xxxx.com/h5/author?token=xxxxxxxxx&msg=200,这里的参数就是后台重定向到前台http://www.xxxx.com/h5/author,并携带的参数。这样就可以拿到我们想要的token了
//判断一下后台返回的状态码msg,因为可能出现微信拿不到token的情况
console.log(1111111)
let msg = GetQueryString("msg")
if (msg == 200) {
this.token = GetQueryString("token");
//存储token到本地
window.localStorage.setItem("user_token", this.token);
//获取beforeLoginUrl,我们的前端页面
let url = window.localStorage.getItem("beforeLoginUrl");
//跳转
console.log(url)
this.$router.push(url);
//删除本地beforeLoginUrl
// window.localStorage.removeItem('');
removeLocalStorage("beforeLoginUrl");
}else{
//msg不是200的情况,可能跳到404的错误页面
}
}
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style scoped>
.bg{
width: 100%;
background-image: url('/static/img/qd.jpg');
height:100%;
background-size: cover;
}
</style>
3.截取方法 mixin.js
export const GetQueryString = name => {
var url = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var newUrl = window.location.search.substr(1).match(url);
console.log(newUrl);
if (newUrl != null) {
return unescape(newUrl[2]);
} else {
return false;
}
};
路由模式用history,apache vue history模式配置,在打包好dist文件加.htaccess 同时上传服务器
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
更多推荐
已为社区贡献1条内容
所有评论(0)