当前端拿到后端返回的token,可以通过localStorage存储到本地,然后通过jwt-decode对token进行解析,jwt-decode是一种对token的解析包,通过npm install jwt-decode 设置好存储方式后,当用户再次登录的时候,在浏览器段可以看点用户存储的token。 当页面很多地方需要用到token的时候,用户必须携带token才能访问其他页面,可以通过...
token使用后清除路由上的token字段;替换当前的浏览器历史记录清除token,不导致页面重载:window.history.replaceState({}, '', newUrl); 在page/index.vue 主文件中的 onMounted 主页面加载完后做个定时清空token处理, /** token在app.ts中router.beforeEach使用后,开始加载页面进入页面时清空,*/ setTimeout(() =...
getToken(): string {returnthis.get<string>(TOKEN)asstring }, removeToken() {this.remove(TOKEN) } }; exportdefault$localStorage; 页面改造 http改造 修改http/index.ts文件 调整请求拦截和响应拦截 // 请求拦截 this.service.interceptors.request.use((config: AxiosRequestConfig) =>{ //请求头中赋值to...
writeFile(`${cwd}/components/components.ts`, `${cpTpl}\nexport { default as ${compName} } from './${dashName}'`), writeFile(`${cwd}/components/style.ts`, `${stTpl}\nimport './${dashName}/style'`), ]) // 3.2 写入component.json compJson[compType].children[compName] = { ...
Vue3丨TS丨封装接口详解 后端处理请求 “第二个域接口”,相当于代理动作。这样子前端就不会有跨域问题,无需做其他事。 存在问题:如果只是单纯的做代理,个人觉得有一种耦合的感觉,方法较为不优雅。 在前端请求两个不同域的接口。 存在问题: 由于浏览器同源策略,必须会有一个域的接口跨域,后端需要设置允许跨域白...
将类型单独封装到type.ts文件中 单独对应实例的拦截器 import{AxiosRequestConfig,AxiosResponse}from'axios'exportinterfacexwlRequestInterceptors<T=AxiosResponse>{//定义扩展接口类型requestInterceptor?:(config:AxiosRequestConfig)=>AxiosRequestConfig requestInterceptorCatch?:(error:any)=>any ...
Vue3+TS——跨域解决方案 简介:跨域解决方案 vue.config.js const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({transpileDependencies: true,devServer:{proxy:{'/api':{target: 'http://xx.xx.xxx.xx',changeOrigin:true,pathRewrite: {'^/api': ''}}}) 如果...
}) 3.2、main.ts文件代码:import './assets/main.css' import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' import {router} from './router/index' const app = createApp(App) app.use(createPinia()) app.use(router) app.mount('#app')...
vue3已经出来很久了,因为工作只是再维护老项目,没有做技术更新,所以对vue3的使用上面会差很多,但是现在又有许多公司要求有vue3使用经验,所以对Vue3 ts自学写的模板项目 这里会写明全部流程及要点。 后台管理首页 登录页面 需要的话可以自行下载 vite使用的Rollup进行打包,相对来说是比webpack更加轻量级的,这里从项目...
当没有登录时,我们需要跳转到登录页,我们来增加路由守卫,修改 index.ts ... router.beforeEach((to,from,next)=>{ consttoken:string|null=localStorage.getItem('token') if(!token&&to.path!=='/login'){ next('/login') }else{ next() } }...