nuxt中使用路由守衛的方法步驟
阿新 • • 發佈:2021-12-08
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儲存起來
et 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) }