nuxt中使用路由守卫的方法步骤


Posted in Javascript onJanuary 27, 2019

1.在plugins文件下创建一个route.js

import { getCookie, setCookie } from '@/pages/logreg/api/cookie'
import axios from 'axios'

export default ({ app, store }) => {
 app.router.beforeEach((to, from, next) => {
  let isClient = process.client
  if (isClient) {
   let currentUrl = location.href
   if (currentUrl.indexOf('access_token=') !== -1) {
    let wechattoken = currentUrl.split('access_token=')[1]
    wechattoken = wechattoken.split('&')[0]
    setCookie('token', wechattoken, 5)
   }
   let token = getCookie('token')
   if (token) {
    store.state.user.userinfo.token = token
    axios
     .get('https://api.ass.net/pub/api/user_info', {
      params: {
       token
      }
     })
     .then(res => {
      res = res.data
      if (res.code == 0) {
       res = res.data
       res.headImg = res.headImg.replace('http:', 'https:')
       store.state.user.userinfo = Object.assign(
        {},
        store.state.user.userinfo,
        res
       )
      }
     })
     .catch(error => console.log(error))
   }
  }
  next()
 })
}

2.在nuxt.config.js里面配置

plugins: [
  { src: '@/plugins/route', ssr: true }
 ],

PS:Nuxt在axios请求拦截中使用路由

最近在开发一个网站,用的nuxt搭建的框架,因为需要在请求token过期之后提示用户重新登录并且返回登录页面,但是在axios的配置文件中使用router.push一直报错,都准备放弃使用公众组件去进行路由跳转了,但是天无绝人之路,最终在官方文档中找到了redirect,具体操作如下:

在axios的js文件中添加默认的方法,并且获取redirect,并且使用使用myredirect将redirect储存起来

let myredirect;
export default function ({redirect }) {
 myredirect = redirect;
}

在需要使用路由跳转的地方进行跳转(此处在判断token过期时跳转)

if (error.message.toString().slice(-3) === '401') {
  Vue.prototype.$message.error('登陆超时,请重新登陆...')
  setTimeout(function () {
   return myredirect('/login/login')
  }, 2000)
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
Jquery解析json数据详解
Dec 26 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 Javascript
js实现模糊匹配功能
Feb 15 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 #Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 #Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 #Javascript
实例讲解JS中pop使用方法
Jan 27 #Javascript
Vue.js实现的购物车功能详解
Jan 27 #Javascript
JS温故而知新之变量提升和时间死区
Jan 27 #Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 #Javascript
You might like
PHP编程中八种常见的文件操作方式
2006/11/19 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
最基础的Python的socket编程入门教程
2015/04/23 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
基于python 字符编码的理解
2017/09/02 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
幼儿园实习生辞职信
2014/01/20 职场文书
2014年创卫实施方案
2014/02/18 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
计算机实训心得体会
2016/01/14 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP