重写登录页面

.babelrc

 {
   "presets": [
     ["es2015", { "modules": false }]
-  ]
+  ],
+  "plugins": ["transform-object-rest-spread"]
 }

package.json

@@ -17,7 +17,8 @@
   "dependencies": {
     "iview": "^3.0.0",
     "vue": "^2.5.16",
-    "vue-router": "^2.8.1"
+    "vue-router": "^2.8.1",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "autoprefixer-loader": "^2.0.0",
@@ -27,6 +28,7 @@
     "babel-plugin-transform-runtime": "^6.12.0",
     "babel-preset-es2015": "^6.9.0",
     "babel-runtime": "^6.11.6",
+    "babel-preset-stage-2": "^6.1.18",
     "css-loader": "^0.23.1",
     "extract-text-webpack-plugin": "^2.0.0",
     "file-loader": "^0.8.5",
@@ -44,7 +46,10 @@
     "vue-template-compiler": "^2.2.1",
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.4.1",
-    "webpack-merge": "^3.0.0"
+    "webpack-merge": "^3.0.0",
+    "js-cookie": "^2.2.0",
+    "axios": "^0.18.0",
+    "mockjs": "^1.0.1-beta3"
   },
   "bugs": {
     "url": "https://github.com/iview/iview-project/issues"

src/api/userAction.js

+import axios from 'axios'
+
+export const login = ({ userName, password ,localUserInfo}) => {
+  const data = {
+    userName,
+    password,
+    localUserInfo,
+  }
+  console.log(data)
+  return axios.post('http://192.168.3.106:8083/login',data,{
+    withCredentials: true, // 跨域凭证
+  }).then(res =>{
+    console.log("跨域凭证")
+    console.log(res)
+    if(res.data.flag){
+      return Promise.resolve(res.data)
+    }else{
+      return Promise.reject(res.data)
+    }
+    }).catch( err =>{
+    return Promise.reject(err)
+  })
+}
+
+export const getUserInfo = (token) => {
+  return axios.request({
+    url: 'get_info',
+    params: {
+      token
+    },
+    method: 'get'
+  })
+}
+
+export const logout = (token) => {
+  return axios.post("http://192.168.3.106:8083/loginOut",token,{
+  }).then(res =>{
+    console.log(res)
+  }).catch( err =>{
+    console.log(err)
+  })
+}
+

src/components/register-form/index.js

+import LoginForm from './login-form.vue'
+export default LoginForm

src/components/register-form/login-form.vue

+<template>
+  <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
+    <FormItem prop="userName">
+      <Input v-model="form.userName" placeholder="请输入用户名">
+        <span slot="prepend">
+          <Icon :size="16" type="ios-person"></Icon>
+        </span>
+      </Input>
+    </FormItem>
+    <FormItem prop="password">
+      <Input type="password" v-model="form.password" placeholder="请输入密码">
+        <span slot="prepend">
+          <Icon :size="14" type="md-lock"></Icon>
+        </span>
+      </Input>
+    </FormItem>
+    <FormItem>
+      <Button @click="handleSubmit" type="primary" long>登录</Button>
+    </FormItem>
+  </Form>
+</template>
+<script>
+export default {
+  name: 'LoginForm',
+  props: {
+    userNameRules: {
+      type: Array,
+      default: () => {
+        return [
+          { required: true, message: '账号不能为空', trigger: 'blur' }
+        ]
+      }
+    },
+    passwordRules: {
+      type: Array,
+      default: () => {
+        return [
+          { required: true, message: '密码不能为空', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  data () {
+    return {
+      form: {
+        userName: '',
+        password: ''
+      }
+    }
+  },
+  computed: {
+    rules () {
+      return {
+        userName: this.userNameRules,
+        password: this.passwordRules
+      }
+    }
+  },
+  methods: {
+    handleSubmit () {
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          this.$emit('on-success-valid', {
+            userName: this.form.userName,
+            password: this.form.password
+          })
+        }
+      })
+    }
+  }
+}
+</script>

src/config/config.js

-import Env from './env';
-
-let config = {
-    env: Env
-};
-export default config;
\ No newline at end of file

src/config/index.js

+export default {
+    /**
+     * @description token在Cookie中存储的天数，默认1天
+     */
+    cookieExpires: 1,
+    /**
+     * @description api请求基础路径
+     */
+    baseUrl: {
+        dev: '',
+        pro: ''
+    },
+    /**
+     * @description 默认打开的首页的路由name值，默认为home
+     */
+    homeName: 'home',
+    loginName:'login',
+    registerName:'register',
+
+    configs :{
+        env: "development"
+    }
+}
+

src/libs/cookieUtil.js

+import Cookies from 'js-cookie'
+import config from '../config'
+import {USER_MAP_LOCAL,USER_MAP_REGISTER} from '../mock/login'
+
+
+export const title = function (title) {
+    title = title ? title + ' - Home' : 'iView project';
+    window.document.title = title;
+};
+
+export const TOKEN_KEY = 'token'
+const {cookieExpires} = config;
+
+export function  handleUserInfo(){
+    let USER_MAP_TEMP = getRegisterUserMap()
+    USER_MAP_TEMP=JSON.parse(USER_MAP_TEMP)
+    if(USER_MAP_TEMP.length<2){
+        USER_MAP_TEMP = getLocalUserMap()
+        USER_MAP_TEMP=JSON.parse(USER_MAP_TEMP)
+        // console.log(USER_MAP_TEMP)
+    }
+    return USER_MAP_TEMP;
+}
+export const local = "MAP_LOCAL"
+export const setLocalUserMap = () => {
+    Cookies.set(local, USER_MAP_LOCAL, { expires: cookieExpires || 1 })
+}
+
+export const getLocalUserMap = () => {
+    const USER_MAP_LOCAL = Cookies.get(local)
+    if (USER_MAP_LOCAL) return USER_MAP_LOCAL
+    else return false
+}
+
+export const register = "MAP_REGISTER"
+export const setRegisterUserMap = () => {
+    Cookies.set(register,USER_MAP_REGISTER, { expires: cookieExpires || 1 })
+}
+
+export const getRegisterUserMap = () => {
+    const USER_MAP_REGISTER= Cookies.get(register)
+    if (USER_MAP_REGISTER) return USER_MAP_REGISTER
+    else return false
+}
+
+export const setToken = (token) => {
+    Cookies.set(TOKEN_KEY, token, { expires: cookieExpires || 1 })
+}
+
+export const getToken = () => {
+    const token = Cookies.get(TOKEN_KEY)
+    if (token) return token
+    else return false
+}
+
+
+

src/libs/util.js

-let util = {
-
-};
-util.title = function (title) {
-    title = title ? title + ' - Home' : 'iView project';
-    window.document.title = title;
-};
-
-export default util;
\ No newline at end of file

src/main.js

@@ -2,13 +2,22 @@ import Vue from 'vue';
 import iView from 'iview';
 import VueRouter from 'vue-router';
 import Routers from './router';
-import Util from './libs/util';
+import {title} from './libs/cookieUtil';
 import App from './app.vue';
 import 'iview/dist/styles/iview.css';
+import store from './store'
+import config from './config'
 
 Vue.use(VueRouter);
 Vue.use(iView);
 
+require('./mock')
+
+/**
+ * @description 全局注册应用配置
+ */
+Vue.prototype.$config = config
+
 // 路由配置
 const RouterConfig = {
     mode: 'history',
@@ -18,7 +27,7 @@ const router = new VueRouter(RouterConfig);
 
 router.beforeEach((to, from, next) => {
     iView.LoadingBar.start();
-    Util.title(to.meta.title);
+    title(to.meta.title);
     next();
 });
 
@@ -30,5 +39,6 @@ router.afterEach((to, from, next) => {
 new Vue({
     el: '#app',
     router: router,
+    store,
     render: h => h(App)
 });

src/mock/index.js

+import Mock from 'mockjs'
+import { login, loginOut, getUserInfo } from './login'
+
+// 配置Ajax请求延时，可用来测试网络延迟大时项目中一些效果
+Mock.setup({
+  timeout: 1000
+})
+
+// 登录相关和获取用户信息
+Mock.mock('http://192.168.3.106:8083/login', login)
+// Mock.mock(/\/login/, register)
+Mock.mock("http://192.168.3.106:8083/loginOut", loginOut)
+
+
+export default Mock

src/mock/login.js

+export const USER_MAP_LOCAL = [
+  {
+    name: 'super_admin',
+    password:'123',
+    token: 'super_admin',
+  },
+  {
+    name: 'admin',
+    password:'321',
+    token: 'admin',
+  },
+];
+export const  USER_MAP_REGISTER = [
+  {
+    name: 'test',
+    password:'test',
+    token: 'test',
+  },
+]
+
+
+export const login = req => {
+  req = JSON.parse(req.body)
+  console.log(req)
+  const localUserInfo = req.localUserInfo
+  console.log(localUserInfo)
+  let localUserInfoTemp = {name:'',password:'',token:'',flag:false}
+  for(let i=0;i<localUserInfo.length;i++){
+    console.log(localUserInfo[i])
+    if(localUserInfo[i].name === req.userName){
+      if(localUserInfo[i].password === req.password){
+            localUserInfoTemp.name=req.userName,
+            localUserInfoTemp.password=req.password,
+            localUserInfoTemp.token=localUserInfo[i].token,
+            localUserInfoTemp.flag=true
+        break;
+      }else{
+        localUserInfoTemp.password = '密码名错误'
+      }
+    }else{
+      localUserInfoTemp.name = '用户名错误'
+    }
+  }
+    return localUserInfoTemp;
+
+}
+
+export const loginOut = req =>{
+return req;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+export const getUserInfo = req => {
+  const params = getParams(req.url)
+  return USER_MAP[params.token]
+}
+
+export const logout = req => {
+  return null
+}

src/mock/register.js

+import { getParams } from '@/libs/util'
+const USER_MAP = {
+  super_admin: {
+    name: 'super_admin',
+    user_id: '1',
+    access: ['super_admin', 'admin'],
+    token: 'super_admin',
+    avator: 'https://file.iviewui.com/dist/a0e88e83800f138b94d2414621bd9704.png'
+  },
+  admin: {
+    name: 'admin',
+    user_id: '2',
+    access: ['admin'],
+    token: 'admin',
+    avator: 'https://avatars0.githubusercontent.com/u/20942571?s=460&v=4'
+  }
+}
+
+export const login = req => {
+  req = JSON.parse(req.body)
+  return { token: USER_MAP[req.userName].token }
+}
+
+export const getUserInfo = req => {
+  const params = getParams(req.url)
+  return USER_MAP[params.token]
+}
+
+export const logout = req => {
+  return null
+}

src/router.js

 const routers = [
     {
         path: '/',
+        name:'home',
+        component: (resolve) => require(['./views/index.vue'], resolve)
+    },
+    {
+        path: '/login',
+        name:'login',
+        component: (resolve) => require(['./views/login/login.vue'], resolve)
+    },
+    // {
+    //     path: '/register',
+    //     name:'register',
+    //     component: (resolve) => require(['./views/register/register.vue'], resolve)
+    // },
+    {
+        path: '/admin',
         meta: {
-            title: ''
+            roles: ['admin'] //该页面可访问的权限
         },
-        component: (resolve) => require(['./views/index.vue'], resolve)
-    }
+        component: { template: '<div>admin页面1</div>' }
+    },
+    {
+        path: '/boos',
+        meta: {
+            roles: ['boos'] //该页面可访问的权限
+        },
+        component: { template: '<div>boos页面1</div>' },
+    },
+    { path: '*', component: { template: '<div>404未找到</div>' } }
 ];
 export default routers;
\ No newline at end of file

src/store/index.js

+import Vue from 'vue'
+import Vuex from 'vuex'
+import user from './module/user'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    //
+  },
+  mutations: {
+    //
+  },
+  actions: {
+    //
+  },
+  modules: {
+    user,
+  }
+})

src/store/module/user.js

+import {
+  login,
+  logout,
+} from '../../api/userAction'
+
+import { setToken, getToken,getLocalUserMap,getRegisterUserMap,handleUserInfo} from '../../libs/cookieUtil'
+
+export default {
+  state: {
+    userName: '',
+    userId: '',
+    token: getToken(),
+  },
+  mutations: {
+    setUserName (state, name) {
+      state.userName = name
+    },
+    setToken (state, token) {
+      state.token = token
+      setToken(token)
+    },
+  },
+  getters: {
+  },
+  actions: {
+    // 登录
+    handleLogin ({ commit }, { userName, password}) {
+      const localUserInfo = handleUserInfo()
+      console.log(localUserInfo)
+      userName = userName.trim()
+      return new Promise((resolve, reject) => {
+        login({
+          userName,
+          password,
+          localUserInfo
+        }).then(res => {
+          console.log("actions handleLogin")
+          console.log(res)
+          commit('setToken', res.token)
+          resolve(res)
+        }).catch(err => {
+          reject(err)
+        })
+      })
+    },
+
+    // 退出登录
+    handleLogOut ({ state, commit }) {
+      return new Promise((resolve, reject) => {
+        logout(state.token).then(() => {
+          commit('setToken', '')
+          resolve()
+        }).catch(err => {
+          reject(err)
+        })
+        // 如果你的退出登录无需请求接口，则可以直接使用下面三行代码而无需使用logout调用接口
+        // commit('setToken', '')
+        // commit('setAccess', [])
+        // resolve()
+      })
+    },
+  }
+}

src/views/index.vue

@@ -34,12 +34,17 @@
                 <h2>
                     <p>Welcome to your iView app!</p>
                     <Button @click="handleStart">Start iView</Button>
+                    <Button ><router-link to="/login">登录</router-link></Button>
+                    <Button ><router-link to="/admin">admin页面</router-link></Button>
+                    <Button ><router-link to="/boos">boos页面</router-link></Button>
                 </h2>
             </Col>
         </Row>
     </div>
 </template>
 <script>
+    import {setLocalUserMap,setRegisterUserMap} from "../libs/cookieUtil";
+
     export default {
         methods: {
             handleStart () {
@@ -48,6 +53,10 @@
                     content: 'Now, enjoy the convenience of iView.'
                 });
             }
+        },
+        mounted(){
+            setLocalUserMap()
+            setRegisterUserMap()
         }
     }
 </script>

src/views/login/login.less

+.login{
+    width: 100%;
+    height: 100%;
+    //background-image: url("../.././assets/images/login-bg.jpg");
+    & img{
+        width: 100%;
+        height: 100%;
+    }
+    &-con{
+        position: absolute;
+        right: 160px;
+        top: 10%;
+        transform: translateY(60%);
+        width: 300px;
+        &-header{
+            font-size: 16px;
+            font-weight: 300;
+            text-align: center;
+            padding: 30px 0;
+        }
+        .form-con{
+            padding: 10px 0 0;
+            .error{
+                padding: 0;
+                text-align: center;
+                margin: 0 auto;
+                color: red;
+                font-size: 10px;
+            }
+        }
+        .login-tip{
+            font-size: 10px;
+            text-align: center;
+            color: #c3c3c3;
+        }
+    }
+}

src/views/login/login.vue

+<style lang="less">
+  @import './login.less';
+</style>
+<template>
+  <div class="login">
+    <img src="../../assets/images/login-bg.jpg"  alt="null">
+    <div class="login-con">
+      <Card icon="log-in" title="欢迎登录" :bordered="false">
+        <div class="form-con">
+          <login-form @on-success-valid="handleSubmit"></login-form>
+          <p class="error">{{error.name}}</p>
+          <p class="error">{{error.password}}</p>
+          <p class="login-tip">输入任意用户名和密码即可</p>
+        </div>
+      </Card>
+    </div>
+  </div>
+</template>
+
+<script>
+  import LoginForm from '../../components/login-form'
+  import { mapActions } from 'vuex'
+export default {
+  components: {
+    LoginForm
+  },
+  data(){
+    return{
+      error:'',
+    }
+  },
+
+  methods: {
+    ...mapActions([
+      'handleLogin',
+    ]),
+    handleSubmit ({ userName, password }) {
+      this.handleLogin({ userName, password }).then(res => {
+        // this.getUserInfo().then(res => {
+          this.$router.push({
+            name: this.$config.homeName
+          })
+        // })
+      }).catch( err =>{
+        this.error = err
+      })
+    }
+  }
+}
+</script>
+<style>
+</style>

src/views/loginSuccess/login.less

+.login{
+    width: 100%;
+    height: 100%;
+    //background-image: url("../.././assets/images/login-bg.jpg");
+    & img{
+        width: 100%;
+        height: 100%;
+    }
+    &-con{
+        position: absolute;
+        right: 160px;
+        top: 10%;
+        transform: translateY(60%);
+        width: 300px;
+        &-header{
+            font-size: 16px;
+            font-weight: 300;
+            text-align: center;
+            padding: 30px 0;
+        }
+        .form-con{
+            padding: 10px 0 0;
+
+        }
+        .login-tip{
+            font-size: 10px;
+            text-align: center;
+            color: #c3c3c3;
+        }
+    }
+}

src/views/loginSuccess/login.vue

+<style lang="less">
+  .index{
+    width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    text-align: center;
+    h1{
+      height: 150px;
+      img{
+        height: 100%;
+      }
+    }
+    h2{
+      color: #666;
+      margin-bottom: 200px;
+      p{
+        margin: 0 0 50px;
+      }
+    }
+    .ivu-row-flex{
+      height: 100%;
+    }
+  }
+</style>
+<template>
+  <div class="index">
+    <Row type="flex" justify="center" align="middle">
+      <Col span="24">
+        <h1>
+          <img src="../images/logo.png">
+        </h1>
+        <h2>
+          <p>Welcome to your iView app!</p>
+          <Button @click="handleStart">Start iView</Button>
+        </h2>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<script>
+  import { mapActions } from 'vuex'
+export default {
+  data(){
+    return{
+      error:'',
+    }
+  },
+
+  methods: {
+    ...mapActions([
+      'handleLogOut',
+    ]),
+    handleOut () {
+      this.handleLogOut().then(res => {
+          this.$router.push({
+            name: this.$config.loginName
+          })
+
+      }).catch( err =>{
+        console.log(err)
+      })
+    }
+  }
+}
+</script>
+<style>
+</style>

webpack.dev.config.js

@@ -7,7 +7,7 @@ const fs = require('fs');
 
 fs.open('./src/config/env.js', 'w', function (err, fd) {
     const buf = 'export default "development";';
-    fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer){});
+    fs.write(fd, buf, 0,'utf-8', function (err, written, buffer){});
 });
 
 module.exports = merge(webpackBaseConfig, {