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 输入框内容格式验证代码
Feb 11 Javascript
jquery ajax执行后台方法
Mar 18 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
Angular获取手机验证码实现移动端登录注册功能
May 17 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
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/07/12 PHP
PHP 在线翻译函数代码
2009/05/07 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
XML的代替者----JSON
2007/07/21 Javascript
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
firefo xml 读写实现js代码
2009/06/11 Javascript
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
vue使用openlayers实现移动点动画
2020/09/24 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
Python实现单词翻译功能
2017/06/06 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
德国高性价比网上药店:medpex
2017/07/09 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
文史专业毕业生自荐信
2013/11/17 职场文书
甜点店创业计划书
2014/01/27 职场文书
记账会计岗位职责
2014/06/16 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python
MySQL七种JOIN类型小结
2021/10/24 MySQL