联调登录

src/api/login.js

@@ -0,0 +1,16 @@
+import request from '../utils/request';
+
+export function userLogin (data) {
+  return request({
+    url: 'user/login',
+    method: 'post',
+    data
+  })
+}
+
+export function logout () {
+  return request({
+    url: 'user/logout',
+    method: 'get'
+  })
+}

src/main.js

@@ -13,6 +13,10 @@ Vue.use(ElementUI);
 
 router.beforeEach((to, from, next) => {
   NProgress.start();
+  if (to.path !== '/login' && !localStorage.getItem('token')) {
+    NProgress.done()
+    return next('/login')
+  }
   next()
 });
 

src/pages/layout/toptitle/TopTitle.vue

@@ -5,7 +5,7 @@
         {{item.title}}
       </el-breadcrumb-item>
     </el-breadcrumb>
-    <el-dropdown>
+    <el-dropdown @command="logout">
       <div class="avator">
         <img src="../../../assets/img/default.jpg" alt="">
       </div>
@@ -39,6 +39,7 @@
   }
 </style>
 <script>
+import { logout } from '@/api/login'
 export default {
     //面包屑解决方案，此方法只适用于面包屑与路由显示顺序一致，例如path：01/02/03 面包屑也是01/02/03
     data() {
@@ -62,6 +63,14 @@ export default {
             })
           }
         });
+      },
+      logout() {
+        logout().then(res => {
+          if(res.code == 200) {
+            this.$router.push({ path: '/login' });
+            localStorage.setItem("token", '');
+          }
+        });
       }
     },
     watch: {

src/pages/login/Login.vue

@@ -5,18 +5,19 @@
       <el-form-item prop="userName" class="el-form-item">
         <el-input v-model="loginForm.userName" name="userName" type="text" autocomplete="off" placeholder="账号"/>
       </el-form-item>
-      <el-form-item prop="password" class="el-form-item">
-        <el-input type="password" v-model="loginForm.password" autocomplete="off" show-password placeholder="密码"/>
+      <el-form-item prop="passWord" class="el-form-item">
+        <el-input type="passWord" v-model="loginForm.passWord" autocomplete="off" show-passWord placeholder="密码"  @keyup.enter.native="submitForm('loginForm')"/>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
+        <el-button type="primary"  style="width:100%;" @click.native.prevent="submitForm('loginForm')">登录</el-button>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script>
-  import { mapGetters } from 'vuex'
+  import { mapGetters } from 'vuex';
+  import { Message } from 'element-ui'
   export default {
     name: 'Login',
     data() {
@@ -37,13 +38,13 @@
       return {
         loginForm: {
           userName: '',
-          password: ''
+          passWord: ''
         },
         rules: {
           userName: [
             { validator: checkUserName, trigger: 'blur' }
           ],
-          password: [
+          passWord: [
             { validator: validatePass, trigger: 'blur' }
           ]
         }
@@ -61,11 +62,14 @@
           if (valid) {
             // console.log(this.loginForm.userName);
             // const userName = this.loginForm.userName;
-            // const password = this.loginForm.password;
+            // const passWord = this.loginForm.passWord;
             this.$store.dispatch('Login', this.loginForm).then(() => {
+              Message({
+                message: '登陆成功',
+                type: 'success',
+                duration: 5 * 1000
+              })
               this.$router.push({ path: '/channel/index' })
-            }).catch(() => {
-              alert('登录失败');
             })
             //alert('submit!');
           } else {
@@ -103,6 +107,9 @@
       .el-form-item__label {
         color:#fff;
       }
+      .el-form-item__content {
+        width: 100%;
+      }
       .el-input input{
         background: transparent;
         border: 0px;

src/router/router.js

@@ -5,7 +5,7 @@ import Login from  '@/pages/login/Login';
 import Layout from  '@/pages/layout/Layout';
 Vue.use(Router)
 
-export default new Router({
+const router = new Router({
   // mode: 'history',
   // base: process.env.BASE_URL,
   routes: [
@@ -73,3 +73,5 @@ export default new Router({
     }
   ]
 })
+
+export default router

src/store/modules/login.js

@@ -1,3 +1,4 @@
+import {userLogin} from '../../api/login';
 
 const login = {
   state: {
@@ -10,16 +11,19 @@ const login = {
   },
   actions: {
     Login({ commit }, userInfo) {
-      console.log(userInfo)
-      const username = userInfo.userName.trim();
-      const password = userInfo.password.trim();
+      // const userName = userInfo.userName.trim();
+      // const passWord = userInfo.password.trim();
       return new Promise((resolve, reject) => {
-        if(username == 'admin' && password == '123456') {
-          resolve();
-          commit('SET_FLAG', true)
-        }else {
-          reject();
-        }
+        userLogin(userInfo).then(res => {
+          console.log(res)
+          if(res && res.code == 200) {
+            localStorage.setItem("token", res.data.token);
+            commit('SET_FLAG', true)
+            resolve(res.data);
+          }
+        }).catch(error => {
+          reject(error);
+        })
       })
     }
   }

src/utils/request.js

@@ -12,13 +12,9 @@ const service = axios.create({
 // request拦截器
 service.interceptors.request.use(
   config => {
-    // config.headers['uid'] = 1;
-    // config.headers['channelCode'] = '';
-    // config.headers['courseId'] = '';
-    // config.headers['wareId'] = '';
-    // if (store.getters.token) {
-    //   config.headers['X-Token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
-    // }
+    if (localStorage.getItem('token')) {
+      config.headers['token'] = localStorage.getItem('token'); // 让每个请求携带自定义token 请根据实际情况自行修改
+    }
     return config
   },
   error => {