vue,一路走来(5)--微信登录
微信登录
今天又是周末了,想着博客还没记录完成。是的,下面记录一下微信登录遇到的问题。
在我的项目中,个人中心是需要完成授权登录才可以访问的,首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由,否则就进入登录页面。

定义完路由后,我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。写在路由router.config.js文件里

每个钩子方法接收三个参数:
* to: Route: 即将要进入的目标 路由对象
* from: Route: 当前导航正要离开的路由
* next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
* next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
* next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
* next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
当前token失效了,但是token依然保存在本地。这时候你去访问需要登录权限的路由时,实际上应该让用户重新登录。 这时候就需要结合 http 拦截器 + 后端接口返回的http 状态码来判断。我用了vue-resource拦截器,写在main.js文件里

这个是axios登录拦截的文章,分享一下,http://blog.csdn.net/qq673318522/article/details/55506650
此过程中遇到了个问题,就是我用了localStorage存储信息,后面发现我的手机无法存储,百度也有人遇到同样的问题https://my.oschina.net/crazymus/blog/425650,可以参考,不过根据我的项目需求,后面我用的是sessionStorage。
vue,一路走来(5)--微信登录的更多相关文章
- vue,一路走来(1)--构建vue项目
2016年12月--2017年5月,接触前端框架vue,一路走来,觉得有必要把遇到的问题记录下来. 那时,vux用的是1.0的vue,然而vue2.0已经出来了,于是我结合了mint-ui一起来做项目 ...
- vue,一路走来(13)--vue微信分享
vue微信分享 今天记录一下vue微信分享. 1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.这个不多说,见文档,只有绑定了才能进行下一步的动作 2.需要引入js文件 ...
- vue,一路走来(6)--微信支付
微信支付 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 分享一下vue实现微信支付.在微信浏览器里面 ...
- vue,一路走来(16)--本地及手机调试
闲暇时间记录一下如何绑定域名,实现本地及手机调试的过程.我的是微信开发项目,很多功能及操作都是基于微信来开发的,理所当然的就用到微信开发者工具了. 1.首先打开目录C:\Windows\System3 ...
- vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式
最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './asset ...
- vue,一路走来(14)--短信验证码框的实现(类似支付密码框)
由于项目的扩展,新增了很多功能,今天谈一下短信验证码框的实现. 思路:每个小方框其实就是单独的每一个input标签(叫假input标签),每个长度为1,然后上面再写一个大的input标签(叫真实inp ...
- vue,一路走来(12)--父与子之间传参
今天想起一直没有记录父组件与子组件的传参问题,这在项目中一直用到. 父向子组件传参 Index.vue父组件中 <component-a :msgfromfa="(positionno ...
- vue,一路走来(7)--响应路由参数的变化
今天描述的问题估计会有很多人也遇到过. vue-router多个路由地址绑定一个组件造成created不执行 也就是文档描述的,如下图 我的解决方案: created () { console.log ...
- vue,一路走来(4)--vuex
补充 调用外部js,详细介绍如何调用函数. 1.首先在main.js里引用文件 2.然后算是和jquery框架一样需要所谓的入口函数吧 不过令我烦恼的是,在应用的文件中需要把他包含在另一个函数里,才可 ...
随机推荐
- Android Release 打包提示 "错误:找不到符号"
搞了一上午....必须记录下来
- 如何把word文档内容和图片直接导入到wordpress编辑器
Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...
- 20180820-Java 抽象类
Java 抽象类 在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类除了不 ...
- Oracle 中 not exists (select 'X' ...) 的含义
select a.col1,a.col2 from temp1 a where not exists (select 'X' from temp2 b where b.col2 = a.col1);s ...
- 纯CSS实现项目展示遮罩详情效果
本实例主要用于项目展示时鼠标hover后显示一个遮罩显示项目详情的效果,遮罩采用CSS的绝对定位以及CSS3盒子模型. 本实例应用广泛,很多品牌官方网站均有采用. hover: <!DOCTYP ...
- [CSP-S模拟测试]:嘟嘟噜(约瑟夫问题)
题目描述 由于众所周知的原因,冈部一直欠真由理一串香蕉.为了封上真由理的嘴,冈部承诺只要真由理回答出这个问题,就给她买一车的香蕉:一开始有$n$个人围成一个圈,从$1$开始顺时针报数,报出$m$的人被 ...
- HDU 5952 Counting Cliques(dfs)
Counting Cliques Time Limit: 8000/4000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) ...
- Uva 12563 Jin Ge Jin Qu hao(01背包)
题意: 假定你在唱KTV,还剩下t秒时间.你决定接下来唱你最喜爱的n首歌(不包含劲歌金曲)中的一些歌曲.在时间结束之前再唱一个劲歌金曲.使得唱的歌的总曲目尽量多以及时间总长度. 输入保证所有n+1曲子 ...
- 疑难杂症——解决 Cinder 僵尸卷问题
目录 目录 问题描述 问题解决 最后 问题描述 Cinder 的僵尸卷一般是因为操作不当导致分配的卷无法正常使用且无法正常分离或删除. 问题解决 解决僵尸卷问题的思路类似解决 Linux 系统中的僵尸 ...
- Selenium WebDriver UI对象库
UI对象库:使用配置文件存储测试页面上的定位和定位表达式,做到定位数据和程序的分离. 第一步:实现工具类Object工具类,供测试程序调用. /** * 使用配置文件存储测试页面上的定位和定位表达式, ...