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 二分法(数组array)
Apr 24 Javascript
xss文件页面内容读取(解决)
Nov 28 Javascript
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
javascript 常见功能汇总
Jun 11 Javascript
JSON与String互转的实现方法(Javascript)
Sep 27 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
利用npm 安装删除模块的方法
May 15 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
Laravel向公共模板赋值方法总结
2019/06/25 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
js实现点击切换TAB标签实例
2015/08/21 Javascript
JavaScript继承模式粗探
2016/01/12 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
给Python入门者的一些编程建议
2015/06/15 Python
利用Python实现Windows定时关机功能
2017/03/21 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
PyCharm代码整体缩进,反向缩进的方法
2018/06/25 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
jupyter notebook中美观显示矩阵实例
2020/04/17 Python
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
2014年五一劳动节社区活动总结
2014/04/14 职场文书
社团活动总结书
2014/06/27 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
培训班开班主持词
2015/07/02 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript
PyTorch device与cuda.device用法
2022/04/03 Python
Python作用域和名称空间的详细介绍
2022/04/13 Python