vue-js-cookie

Mr.Meng_95

已于 2022-03-31 18:58:35 修改

阅读量301

点赞数

分类专栏：项目文章标签： vue.js javascript 前端

于 2022-01-21 14:40:27 首次发布

本文链接：https://blog.csdn.net/qq_30351747/article/details/122620947

版权

项目专栏收录该内容

179 篇文章 11 订阅

订阅专栏

本文介绍如何在Vue.js项目中利用js-cookie插件进行Token的存储、读取及删除操作，并展示了如何将其与Vuex状态管理结合使用，实现用户认证状态的全局管理。此外还介绍了路由守卫的应用，确保未授权用户不能访问受保护的页面。

摘要由CSDN通过智能技术生成

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 = null
      removeToken()
    },
  },
  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) => {
  // 是否有token
  const 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)
})