element-ui 使用及一个简单的登录验证

1 ，项目基础准备

vue-cli 创建项目

参考https://www.jianshu.com/p/3d44f8269b47

stylus安装

npm install stylus --save

npm install stylus-loader --save

2，install element-ui

npm i element-ui -S

再main.js中加

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

以上是引入element-ui的全部组件，也可以按需引入，可参考https://element.eleme.cn/#/zh-CN/component/quickstart

3，完成登录验证部分

添加全局前置守卫，验证用户登录状态

在 路由文件中写入

router.beforeEach((to, from, next) => {

  if (to.path === '/login') {

    next();

  } else {

    let token = localStorage.getItem('token');//token保存在localstorage中

    if (token === null || token === '') {

      next('/login');

    } else {

      next();

    }

  }

});

install vuex

在vuex 中写入以下代码

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({

    state:{

        userInfo:localStorage.getItem("userInfo")?localStorage.getItem("userInfo"):'',

        token: localStorage.getItem('token') ? localStorage.getItem('token') : '',

    },

    mutations:{

        //保存登录信息

        saveUserInfo(state,userInfo){

            state.userInfo=userInfo;

            localStorage.setItem('userInfo',userInfo)

        },

        //改变token

        changeToken(state,token){

            state.token = token;

            localStorage.setItem("token",token)

        }

    }

})

完成登录的界面：

界面：

login

---

完成登录方法：

这样就完成了简单的登录，实际项目中加入后台提供的登录接口能使用