vue-js-cookie

安装

npm install js-cookie --save

封装

auth.js

import Cookies from 'js-cookie'const TokenKey = 'stone-token'export function getToken() {return Cookies.get(TokenKey)
}export function setToken(token) {return Cookies.set(TokenKey, token)
}export function removeToken() {return Cookies.remove(TokenKey)
}

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import {getToken, setToken, removeToken} from '../utils/auth'Vue.use(Vuex)export default new Vuex.Store({state: {token: getToken(),},mutations: {setToken(state, token) {setToken(token)},removeToken(state) {state.token = nullremoveToken()},},actions: {},modules: {}
})

let tokenData = res.data.content
this.$store.commit ('setToken',tokenData)

router.js
请求拦截器拦截token

import { getToken } from '@/unit/auth'router.beforeEach(async (to, from, next) => {// 是否有tokenconst token = getToken();if (token) {// 有token// 有token跳登陆页，就给它到主页if (to.path === '/login') {next('/overview?id=全国')} else {// 有token跳其他页，放行next();}} else {// 没有token，去登陆页，放行if (to.path === '/login') {next();} else {// 没有token，去其他页，强制跳到登陆页登录next('/login')}}
});

或者响应拦截器

ajax.interceptors.response.use(success => {console.log(success);if(success.data.statusCode == 1000){router.replace('/login')return success} else if(success.data.statusCode == 1001 || success.data.statusCode == 1002){ElementUI.Message({message: '用户校验失败',type: 'error'});return success} else {return success}
}, error => {return Promise.reject(error)
})

vue-js-cookie相关推荐

vue设置cookie的domain无效_【Vue.js入门到实战教程】16Tailwind 与 Bootstrap 的区别和使用入门...
来源 | https://xueyuanjun.com/post/22065我们知道,从 Laravel 8 开始,自带前端脚手架代码默认兼容 Tailwind CSS 框架,取代了之前的 Boots ...
vue.js crud_如何使用VS Code和ADO.NET使用ASP.NET Core执行CRUD操作
vue.js crud 介绍 (Introduction) In this article we are going to create a web application using ASP.NET ...
nuxt解决首屏加载慢问题_Nuxt.js超过Vue.js：你什么时候应该使用它，为什么
Nuxt.js是一个建立在Vue.js上的前端框架,它提供了很好的开发特性,比如服务器端渲染.自动生成路由.改进的元标签管理和SEO改进. Nuxt.js 我们的前端团队并没有真正考虑在客户端使用 N ...
开奖及送书|《Vue.js权威指南》
2020 06 15 今天距2021年199天这是一页河山第135次推文点击上方蓝字"ITester软件测试小栈"关注我,每周一.三.五早上 07:30准时推送. 微信公众号后 ...
【尚硅谷】Vue.js从入门到精通笔记
目录第1章:Vue核心 1-1.Vue简介 1-1-1.什么是Vue 1-1-2.Vue的特点 1-1-3.搭建Vue开发环境 1-1-4.创建Vue对象 1-2.模板语法 1-3.数据绑定 1-4 ...
vue.js实现带表情评论功能前后端实现（仿B站评论）
文章目录学习链接效果图后台建表评论表(重要) 用户表实体类 Comment User CommentDTO(重要) WebConfig配置配置跨域和静态资源文件夹 Mybatisplus ...
全面掌握前端框架Vue.js
整理自菜鸟教程 Vue.js简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽 ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
Vue.js + Vuex + TypeScript 实战项目开发与项目优化
技术栈: Vue.js + Vuex + TypeScript Todo List: 使用Vue CLI初始化项目调整初始目录结构删除初始化的默认文件(对于我们项目是多余的组件components ...
基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...

vue-js-cookie

vue-js-cookie

安装

封装

vue-js-cookie相关推荐

最新文章

热门文章