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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
基于jquery的商品展示放大镜
Aug 07 Javascript
JS定时器实例
Apr 17 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 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调用三种数据库的方法(3)
2006/10/09 PHP
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
PHP return语句的另一个作用
2014/07/30 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
Prototype的Class.create函数解析
2011/09/22 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
微信小程序动画(Animation)的实现及执行步骤
2018/10/28 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
如何根据业务封装自己的功能组件
2019/04/19 Javascript
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
python3使用matplotlib绘制散点图
2019/03/19 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
Java工程师面试集锦之Spring框架
2013/06/16 面试题
十佳护士获奖感言
2014/02/18 职场文书
机房搬迁方案
2014/05/01 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
毕业生政审意见范文
2015/06/04 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server