5-24 登录界面

src/api/axios.js

@@ -2,7 +2,6 @@
 import BASE from '@tools/base'
 import store from '@store/index'
 import axios from 'axios'
-import {getToken} from '@/utils/auth'
 import { Message } from 'element-ui';
 
 // 创建axios实例
@@ -40,10 +39,23 @@ const httpService_L = axios.create({
   },
 });
 // httpService.defaults.withCredentials = true; // 表示跨域请求时是否需要使用凭证
+httpService_L.interceptors.request.use(
+  config => {
+    if(localStorage.getItem('authToken')){
+      config.headers.authToken = localStorage.getItem('authToken');
+    }
+    return config;
+  },
+  err => {
+    return Promise.reject(err);
+  }
+);
 // http request 拦截器
 httpService.interceptors.request.use(
   config => {
-    config.headers.authToken = getToken;
+    if(localStorage.getItem('authToken')){
+      config.headers.authToken = localStorage.getItem('authToken');
+    }
     return config;
   },
   err => {

src/assets/css/login.scss

@@ -0,0 +1,12 @@
+.bg{
+  background-image: src('@/assets/images/login.jpg');
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.tab{
+  margin-top: 13%;
+  width: 330px;
+  border: 1px solid #000000;
+}

src/assets/js/login.js

@@ -0,0 +1,37 @@
+import { mapMutations} from 'vuex'
+export default {
+  data() {
+    return {
+      username:'',
+      password:'',
+    }
+  },
+  components: {
+  },
+  created() {
+  },
+  
+  methods: {
+    ...mapMutations("user", ["SET_TOKEN"]),
+    login(){
+      var digital = new URLSearchParams();
+      digital.append("username","admin"),
+      digital.append("password","admin"),
+      this.API.post("/admin/loginvue", digital).then((res) => {
+       const {data,code} = res;
+       debugger
+       
+       console.log(localStorage.getItem('authToken'));
+       if(code == 200){
+				this.SET_TOKEN(data);
+				this.$message({
+          message: '登陆成功',
+          type: 'success'
+        });
+         this.$router.push('/'); // 跳转到首页
+			} else {
+        this.$message.error('登录失败');// ui弹窗提示
+			}
+      });
+    }
+  }}

src/router/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import store from '@/store/index';
 
 // 路由3+版本的异常处理
 const originalPush = VueRouter.prototype.push
@@ -49,9 +50,9 @@ const routes = [
     component: error404,
   },
   {
-    path: '/login', // 页面不存在的情况下会跳到404页面
+    path: '/login', 
     meta: {
-      requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的  /进路由勾子函数beforeEach
+      requireAuth: true, 
     },
     name: 'login',
     component: login,
@@ -73,16 +74,16 @@ const router = new VueRouter({
  * **/
  router.beforeEach((to, from, next) => {
     // 路由地址不存在的处理办法
-  
-  if (to.matched.some(m => m.meta.requireAuth)) {    // 需要登录
-    // if(window.localStorage.token && window.localStorage.isLogin === '1'){
-    //   next()
-    // } else 
-    if (to.path !== '/login') {
-      let token = window.localStorage.token;
-      if (token === 'null' || token === '' || token === undefined){
-          next()
-      }
+  if(to.path === '/login' && store.getters.authToken){
+    next({path: '/'})
+  }else if (to.matched.some(m => m.meta.requireAuth)) {    // 需要登录
+    if(window.localStorage.authToken){
+      next()
+    } else if (to.path !== '/login') {
+      let token = localStorage.getItem('authToken');
+      if (token === null || token === '' || token === undefined){
+          next({path: '/login'})
+      }else{next()}
     } else {
       next()
     }

src/store/index.js

@@ -22,7 +22,7 @@ changeTheme (state, tag) {
   },
 };
 var vuexStore = new Vuex.Store({
-  module:{
+  modules:{
     user//调用this['user/login']()  引用 ...mapActions(['user/login']),
   },
   getters,

src/store/modules/user.js

@@ -8,7 +8,7 @@ const mutations = {
     localStorage.removeItem('authToken');
   },
   SET_TOKEN: (state, token) => {
-    state.authToken = value;
+    state.authToken = token;
 	  localStorage.setItem('authToken', token);
   },
   SET_NAME: (state, name) => {
@@ -25,6 +25,7 @@ const actions = {
   }
 }
 export default {
+  namespaced:true,
   state,
   mutations,
   actions,

src/views/login.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="bg">
+    <el-form label-width="80px" class="tab">
+      <el-form-item label="用户名">
+        <el-input placeholder="请输入内容" v-model="username" clearable>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="密码">
+        <el-input
+          placeholder="请输入密码"
+          v-model="password"
+          show-password
+        ></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="login">登录</el-button>
+        <el-button>取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import login from "@assets/js/login";
+export default login;
+</script>
+
+<style lang="scss" scoped>
+@import "@assets/css/login.scss";
+</style>