vue搭建——登录+获取token

1、获取token——utils/auth.js(需要安装Cookies 

import Cookies from 'js-cookie'

// const TokenKey = 'Admin-Token'
const TokenKey = 'front_access_token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

2、在根目录下创建store文件夹

在store文件夹下创建modules文件夹

store_modules_user.js

import { login } from '@/api/login'
import { getToken, setToken, removeToken } from '@/utils/auth'
import router from '@/router'

const state = {
  token: getToken(),
  name: '',
  avatar: '',
  introduction: '',
  roles: []
}

const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_INTRODUCTION: (state, introduction) => {
    state.introduction = introduction
  },
  SET_NAME: (state, name) => {
    state.name = name
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar
  },
  SET_ROLES: (state, roles) => {
    state.roles = roles
  }
}

const actions = {
  // user login
  login({ commit }, userInfo) {
    const { userName, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ userName: userName.trim(), password: password }).then(response => {
				// console.log('token',response.info['front_access_token'])
    // const  token = response.info.accessToken
		const  token = response.info['front_access_token']
    commit('front_access_token', token)
    setToken(token)
        // const { data } = response
        // commit('SET_TOKEN', data.token)
        // setToken(data.token)
        resolve()
      }).catch(error => {
        // reject(error)
				reject(error)
      })
    })
  },


  // user logout
	logout({ commit, state, dispatch }) {
	    return new Promise((resolve, reject) => {
	      logout().then(res => {
	        if (res.code === 100) {
	          commit('SET_TOKEN', '')
	          commit('SET_ROLES', [])
	          commit('SET_NAME', '')
	          commit('SET_CURRENT_ROLE', null)
	          window.sessionStorage.removeItem('userInfo')
	          window.sessionStorage.removeItem('routeIds')
	          window.sessionStorage.removeItem('roles')
	          window.sessionStorage.removeItem('currentRole')
	          removeToken()
	          resetRouter()
	          // reset visited views and cached views
	          // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2485
	          dispatch('tagsView/delAllViews', null, { root: true })
	          Message.info('退出登录成功')
	          // 下面这个resolve方法必须调用,否则如法到达Navbar组件中退出登录回调方法进行路由跳转到登录页面
	          resolve()
	        } else {
	          reject('退出登录失败')
	        }
	      })
	    })
	  },
  logout({ commit, state, dispatch }) {
    return new Promise((resolve, reject) => {
      logout(state.token).then(() => {
        commit('SET_TOKEN', '')
        co
  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值