快捷導(dǎo)航

nuxt中使用路由守衛(wèi)的方法步驟

更新時間：2019年01月27日 09:31:04 作者：houqq

這篇文章主要介紹了nuxt中使用路由守衛(wèi)的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.在plugins文件下創(chuàng)建一個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請求攔截中使用路由

最近在開發(fā)一個網(wǎng)站,用的nuxt搭建的框架,因為需要在請求token過期之后提示用戶重新登錄并且返回登錄頁面,但是在axios的配置文件中使用router.push一直報錯,都準(zhǔn)備放棄使用公眾組件去進(jìn)行路由跳轉(zhuǎn)了,但是天無絕人之路,最終在官方文檔中找到了redirect,具體操作如下:

在axios的js文件中添加默認(rèn)的方法,并且獲取redirect,并且使用使用myredirect將redirect儲存起來

let myredirect;
export default function ({redirect }) {
 myredirect = redirect;
}

在需要使用路由跳轉(zhuǎn)的地方進(jìn)行跳轉(zhuǎn)(此處在判斷token過期時跳轉(zhuǎn))

if (error.message.toString().slice(-3) === '401') {
  Vue.prototype.$message.error('登陸超時，請重新登陸...')
  setTimeout(function () {
   return myredirect('/login/login')
  }, 2000)
 }

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: