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 相关文章推荐
9个javascript语法高亮插件 推荐
Jul 18 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
详解jQuery中的easyui
Sep 02 jQuery
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 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/10/09 PHP
php的字符串用法小结
2010/06/08 PHP
php数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
js+php实现静态页面实时调用用户登陆状态的方法
2015/01/04 PHP
php把数组值转换成键的方法
2015/07/13 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
JS 模态对话框和非模态对话框操作技巧汇总
2013/04/15 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
2015/09/17 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
理解Python中的With语句
2015/02/02 Python
Python出现segfault错误解决方法
2016/04/16 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
python导入坐标点的具体操作
2019/05/10 Python
python 图片去噪的方法示例
2019/07/09 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
你常见到的runtime exception
2016/09/05 面试题
销售副总经理岗位职责
2013/12/11 职场文书
人力资源主管职责范本
2014/03/05 职场文书
清明节演讲稿
2014/05/27 职场文书
导师对论文的学术评语
2015/01/04 职场文书
项目建议书
2015/02/04 职场文书
建党伟业电影观后感
2015/06/01 职场文书
工作表现证明
2015/06/15 职场文书
python实现简单反弹球游戏
2021/04/12 Python
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
使用Apache Camel表达REST服务的方法
2022/06/10 Servers