预览

创建文件

在views中创建login/login.vue 文件

QQ图片20191025112329.png

实现步骤

  1. 实现前端界面后,实现登录请求事件

    this.$store.dispatch('user/login', this.loginModel)

            .then(res => {
              // 登录成功
              this.$router.push({ path: '/' })
            })
    
  2. 在Store/modules/user.js 中实现login

    2.1登录信息,应该就算页面刷新,也保持登录,因此需要用到cookie。在utils中创建auth.js,用于实现管理缓存的Token

    import Cookie from 'js-cookie'

    const TokenKey = 'Permission-Token' // token的Cookie Key

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

    /**

    • 设置Token
    • @param {string} token
      */

    export function setToken(token) {
    if (!token) return clearToken()
    return Cookie.set(TokenKey, token)
    }

    export function clearToken() {
    return Cookie.remove(TokenKey)
    }

2.2 在api目录中实现user的login

//api/user.js
import request from '@/utils/request'
export const login = (loginForm) => {
  return request({
    url: '/login',
    method: 'post',
    data: loginForm
  })
}

2.3 在Store的User实现login

// store/modules/user.js
import { login } from '@/api/user'
import { getToken, setToken } from '@/utils/auth'

// state
const state = {
  access_token: getToken()
}

const mutations = {
  SET_ACCESS_TOKEN: (state, token) => {
    state.access_token = token
    setToken(token)
  }
}

const actions = {
  // 登录
  login({ commit }, userinfo) {
    return new Promise((resolve, reject) => {
      login(userinfo).then(response => {
        commit('SET_ACCESS_TOKEN', response.data.token) // 登录后缓存token
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  }
}

标签: none

添加新评论