Vue3 + Vite + ts,下载和使用 js-cookie;

安装 

npm install --save js-cookie

auth.ts

在 src/utils 下创建 auth.ts 文件夹

import Cookies from "js-cookie";

const TokenKey = "Admin-Token";

export function getToken() {
  return Cookies.get(TokenKey); //获取键名为Admin-Token的值
}

export function setToken(token: string) { 
  return Cookies.set(TokenKey, token); //设置键名Admin-Token,值为token
}

export function removeToken() {
  return Cookies.remove(TokenKey); //移除键名为Admin-Token的值
}

这里项目需要将 Token 存进请求头 的 Cookie 里面

在 请求拦截器 里面 操作代码如下:

// 引入 方法
import { setToken } from "@/utils/auth";

// 说明下 userStore , 是登录成功时后端返回的,然后存放在 pinia 里面

// 请求拦截器
service.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    const userStore = useUserStoreHook();
    console.log('userStore.token',userStore.token);
    // 在这里将 token 弄进 Cookie
    if (userStore.token) {
      config.headers.Authorization = userStore.token;
      // 直接这里使用方法
      setToken(userStore.token)
    }
    return config;
  },
  (error: any) => {
    return Promise.reject(error);
  }
);

Vue3 TS Vite后台管理系统是一个基于Vue3TypeScriptVite等技术栈搭建的前端管理框架。该框架主要包含菜单、选项卡面包屑等模块,通过路由监听实现三个模块之间的联动,并且同时监听浏览器的变化。状态管理方面使用了Pinia进行集中管理。需要注意的是,该示例只包含前端代码,未与后台进行关联实现菜单用户等权限。如果需要进行权限相关的开发,需要进行二次开发。整体效果如效果图所示。 技术栈方面,主要使用Vue3Vue Router、Pinia、Element Plus、Vite等。此外,还使用了一些辅助工具库,如js-cookie等。 项目目录结构如下: - src - assets:资源文件(包括css、img等) - components:公共组件 - pages:存放路由组件 - stores:状态管理 - router:路由配置 - util:工具类 - views:视图组件(存放框架主体组件) - App.vue:根组件 - main.ts:入口文件 - permission.ts:路由跳转权限配置 - setting.ts:配置文件 全局配置文件setting.js统一管理系统的配置,可以进行菜单、选项卡、面包屑等的可配置化。例如可以设置系统名称、是否显示顶部导航、是否显示选项卡、是否显示logo、是否显示菜单等。 该项目的完整代码可以在以下地址下载: [https://gitee.com/yxsmall/vue3-ts-element](https://gitee.com/yxsmall/vue3-ts-element) 总结:以上是对Vue3 TS Vite后台管理系统的简单介绍,如果对该框架感兴趣,可以下载源码进行学习进一步开发。祝学习进步!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值