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 相关文章推荐
javascript div 弹出可拖动窗口
Feb 26 Javascript
jquery插件之easing使用
Aug 19 Javascript
jquery的Theme和Theme Switcher使用小结
Sep 08 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
jQuery回调函数的定义及用法实例
Dec 23 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
layer弹窗插件操作方法详解
May 19 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
简单了解JavaScript sort方法
Nov 25 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 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
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
二招解决php乱码问题
2012/03/25 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
js实现图片轮播效果
2015/12/19 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
pyenv命令管理多个Python版本
2017/03/26 Python
python的变量与赋值详细分析
2017/11/08 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
自学python的建议和周期预算
2019/01/30 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
Python笔记之工厂模式
2019/11/20 Python
浅谈Python3中print函数的换行
2020/08/05 Python
HTTP状态码详解
2021/03/18 杂记
面向对象编程的优势是什么
2015/12/17 面试题
linux面试题参考答案(7)
2012/10/29 面试题
八一建军节部队活动方案
2014/02/04 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
乡镇精神文明建设汇报材料
2014/08/15 职场文书
老乡聚会通知
2015/04/23 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技