【vuejs】用vue写一个自己的博客管理系统（四）：登录和登录后的状态管理

对，我的个人网站，没有注册功能。我直接把用户名和密码还有个人信息写在了数据库里。简单又方便。

登录其实很简单，一个form，里面写两个input，和一个button就行，连样式都可以不用写。
但是为了美观，还是建议大家写一个样式。
我就写了个样式很好看，但是打开就变得很慢的一个登陆页面 。

是不是够浮夸

这里，主要用到的是element-ui里面的el-input和el-button。代码如下

  <el-form :model="form" ref="form" :rules="fromRules" label-width="80px" label-position="top" class="loginBox">
       <div class="title">杨小花的博客管理系统</div>
       <el-form-item label="用户名" prop="username">
         <el-input v-model="form.username" placeholder="请输入用户名"></el-input>
       </el-form-item>
       <el-form-item label="密码" prop="password">
         <el-input v-model="form.password" show-password placeholder="请输入密码">
         </el-input>
       </el-form-item>
       <el-form-item>
         <el-link class="forget" href="/forget" target="_blank">忘记密码?</el-link>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" class="logBtn" @click="login">登录</el-button>
       </el-form-item>
   </el-form>

这里页面的字体，是用的web字体-有字库，这个还挺好用的

这里就是登陆的界面了，界面写完，就该写核心内容了——登陆操作+状态管理(vuex)。

为什么要用上vuex呢，你这么想。任何一个网站，你今天登陆了，假如明天也要访问这个网站，是不是正常来讲是免去登陆的呢

vuex就是做到这一点的

首先，如果项目没有安装的话，先安装
npm install vuex
在项目的src目录下，新建一个store文件夹，我们用一种比较模块化的方式，来写状态管理。

在store文件夹内，新建一个getters.js，store.js，在新建一个modules文件夹，文件夹内新建一个user.js，在这个文件内，写一些和user相关的一些状态管理。

vuex通常有这几个核心内容：state,mutations,actions。
user.js文件如下

import { login, getInfo } from '../../api/user'   //导入的api文件夹里面和用户有关的方法，之后在写，比较简单
import { setToken, getToken, removeToken, resetToken } from '../../utils/auth' //到处和token有关的方法

//存放状态
const state = {
    token: getToken(),
    roles: [],
    userInfo: [],
}

//成员操作
const mutations = {
    set_roles: (state, roles) => {
        state.roles = roles
    },
    set_token: (state, token) => {
        state.token = token
    },
    set_info: (state, userInfo) => {
        state.userInfo = userInfo
    }
}
//异步操作
const actions = {
    login({ commit }, data) {
        return new Promise((resolve, reject) => {
        //登录方法，得到返回的token，然后set进去。这里最好在storage里存一次。
            login(data).then(res => {
                let { data } = res
                commit('set_token', data.token)
                setToken(data.token)
                localStorage.setItem('uid', data.uid)
                resolve()
            }).catch(err => {
                reject(err)
            })
        })
    },
    //得到用户信息方法
    getInfo({ commit }, uid) {
        return new Promise((resolve, reject) => {
            getInfo(uid).then(res => {
                let { data } = res
                commit('set_roles', data.roles)
                commit('set_info', data)
                resolve(data)
            }).catch(err => {
                reject(err)
            })
        })
    },
    resetToken({ commit }) {
        return new Promise(resolve => {
            commit('set_token', '')
            commit('set_roles', [])
            removeToken()
            resolve()
        })
    },
    logout({ commit }) {
        return new Promise((resolve, reject) => {
            commit('set_roles', [])
            commit('set_token', '')
            removeToken()
            resolve()
        })
    }
}


export default {
    namespaced: true,
    state,
    mutations,
    actions
}

getters.js文件如下

const getters = {
    token: state => state.user.token,
    roles: state => state.user.roles,
    permission_routes: state => state.permission.routes,

};
export default getters;

最重要的文件，store.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

//上面这一截在百度上抄的，我只能明白大概的意思
//require.context是webpack中，用来创建自己的（模块）上下文；
//webpack会在代码构建的时候去解析该函数

const store = new Vuex.Store({
  modules,
  getters
})

export default store

这里大概就是状态管理的一部分，然后我们再回到登录页面。
登录页面的方法其实也很简单，得到输入的用户名和密码，然后再提交给服务器，得到返回的值。

login() {
	//这里的user/login   就是store文件夹里的user文件里的  action里面的login方法。这里就用
	//this.$store.dispatch来调用了 
      this.$store
        .dispatch("user/login", this.form)
        .then(res => {
            this.$router.push({
              path: this.redirect || "/dashboard/analysis",
              query: this.otherQuery
            });
            //登录成功后，就直接跳转到仪表盘页面。
        })
        .catch(err => {
          console.log(err);
           this.$message.error(err.message);
        });
    }

我们之前只在storage里存了下uid，登录成功后，在浏览器里，就能看到了。

至此，登录功能就完成了。