标签：const storage value token key vue3 config

vue3封装storage实现token验证

验证思路

1 登录成功返回 token

2 拿到token，将token存储到localStorage，并跳转路由页面

3 跳转路由，就判断 localStroage 中有无 token

4 调后端接口，都要在请求头中加token

5 前端拿到状态码为401，就清除token信息并跳转到登录页面

storage封装

localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

/**
 * 封装操作localstorage本地存储的方法
 */
export const storage = {
  //存储
  set(key: string, value: any) {
    localStorage.setItem(key, JSON.stringify(value))
  },
  //取出数据
  get<T>(key: string) {
    const value = localStorage.getItem(key)
    if (value && value != "undefined" && value != "null") {
      return <T>JSON.parse(value)
    }
  },
  // 删除数据
  remove(key: string) {
    localStorage.removeItem(key)
  }
};

/**
 * 封装操作sessionStorage本地存储的方法
 */
export const sessionStorage = {
  //存储
  set(key: string, value: any) {
    window.sessionStorage.setItem(key, JSON.stringify(value))
  },
  //取出数据
  get<T>(key: string) {
    const value = window.sessionStorage.getItem(key)
    if (value && value != "undefined" && value != "null") {
      return JSON.parse(value)
    }
    return null
  },
  // 删除数据
  remove(key: string) {
    window.sessionStorage.removeItem(key)
  }
}

login.vue

登录成功后进行token保存

<script setup lang="ts">
import { Routers } from '@/hooks/routers'
import { user } from '@/api/index'
import { reactive } from 'vue'
import { useStore } from 'vuex'
import { storage } from '@/utils/storage/storage'
const stores = useStore()
const state = reactive({
  user: 'kai',
  pwd: 'kai',
  result: [],
})

async function login() {
  user.Login(state.user, state.pwd).then((res) => {
    state.result = res.data.split(',')
    if (state.result[0] === '1') {
      storage.set('token', 'Bearer ' + state.result[1])
      Routers('/Admin-index/ArticleTable')
    }
  })
}
</script>

axios.ts

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  if (
    config.method === "post" ||
    config.method === "put" ||
    config.method === "delete"
  ) {
    // qs序列化
    config.data = qs.parse(config.data);
  }
  // 鉴权token , 给头部带上token
  if (storage.get('token')) {
    config.headers.Authorization = storage.get('token');
    console.log('%c [  config.headers.Authorization ]', 'font-size:13px; background:pink; color:#bf2c9f;', config.headers.Authorization)
  }
  return config;
}, error => {
  return Promise.reject(error.data.error.message);
})

全局前置守卫

// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
  if (to.path === "/Login") {
    next();
  } else {

    const token = storage.get('token')
    if (token === undefined || token === "") {
      next("/Login");
    } else {
      next();
    }
  }
});

标签：const,storage,value,token,key,vue3,config
来源： https://www.cnblogs.com/ouyangkai/p/15424713.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。