Nuxt 框架 处理 前端 token

 实现思路:

Nuxt 框架 处理 前端 token_第1张图片

一.获取用户token并持久化数据

Nuxt 框架 处理 前端 token_第2张图片

//本地存储 
localStorage.setItem("token", baseResult.other.token)

二.配置axios插件(处理需要的token)

  2.1导入axios

Nuxt 框架 处理 前端 token_第3张图片

2.2 请求携带token 与重定向

Nuxt 框架 处理 前端 token_第4张图片

//导入element ui message
import { MessageBox } from 'element-ui'
export default function ({ $axios, redirect }) {
  $axios.onRequest((config) => {
    //获得token
    let token = localStorage.getItem("token");
    //携带token
    $axios.setToken(token);
  });

  $axios.onError((error) => {
    // 获得状态码
    const code = parseInt(error.response && error.response.status);
    console.log(code,"code");
    //重定向
    if (code === 400) {
      redirect("/400");
    }
    if(code === 401) {
      //删除无效token
      localStorage.removeItem('token')
      //提示
      MessageBox.confirm(error.response.data, '提示', {
        confirmButtonText: '重新登录',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //确定,跳转到登录
        location.href = '/user/login'
      }).catch(() => {
        //取消
      });
    }
  });
}

你可能感兴趣的:(大前端,前端)