完成首页登录模块

package-lock.json

@@ -2469,6 +2469,14 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
+    "axios": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
+      "requires": {
+        "follow-redirects": "^1.14.4"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz?cache=0&sync_timestamp=1611946434496&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-eslint%2Fdownload%2Fbabel-eslint-10.1.0.tgz",
@@ -5955,8 +5963,7 @@
     "follow-redirects": {
       "version": "1.14.4",
       "resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.4.tgz",
-      "integrity": "sha1-g4/fSKi73XnlLuUfsclOPtmLk3k=",
-      "dev": true
+      "integrity": "sha1-g4/fSKi73XnlLuUfsclOPtmLk3k="
     },
     "for-in": {
       "version": "1.0.2",

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.24.0",
     "core-js": "^3.6.5",
     "default-passive-events": "^2.0.0",
     "element-ui": "^2.15.6",

src/apis/login.js

@@ -0,0 +1,9 @@
+import axios from '../utils/request'
+// 用户登录接口
+export const userLogin = (data) => {
+  return axios({
+    method: 'post',
+    url: '/admin/login',
+    data
+  })
+}

src/utils/request.js

@@ -0,0 +1,38 @@
+import axios from 'axios'
+const service = axios.create({
+  baseURL: 'http://192.168.0.135:8007', // 本地调试
+  // baseURL: 'http://8.135.106.227:8007', // 线上调试
+  // baseURL: '', // build
+  timeout: 5000
+})
+// 请求拦截器
+service.interceptors.request.use(function (config) {
+  // console.log('触发拦截器')
+  // 在发送请求之前做些什么：看看有没有token，如果有通过请求头的方式传递token
+  const token = localStorage.getItem('SWKK_token')
+  if (token) { // 判断是否有token,有，则
+    // config.headers['Authorization'] = token
+    config.headers.token = token
+  }
+
+  return config
+}, function (error) {
+  // 对请求错误做些什么
+  return Promise.reject(error)
+})
+
+// 添加响应拦截器
+service.interceptors.response.use(function (response) {
+  // console.log('触发相应拦截器', response)
+  // 对响应数据做点什么--response就是发送每个请求的返回值
+  if (response.data.code === 5001 || response.data.code === 5002) {
+    // Toast.fail('未登录，请先登录')
+    localStorage.removeItem('SWKK_token')
+  }
+  return response.data
+}, function (error) {
+  // 对响应错误做点什么
+  return Promise.reject(error)
+})
+
+export default service

src/views/login.vue

@@ -10,8 +10,8 @@
         <el-form-item label="用户名" prop="userName">
           <el-input v-model="ruleForm.userName" placeholder="请输入用户账号"></el-input>
         </el-form-item>
-        <el-form-item label="密码" prop="passWorg">
-          <el-input v-model="ruleForm.passWorg" placeholder="请输入登录密码" show-password></el-input>
+        <el-form-item label="密码" prop="password">
+          <el-input v-model="ruleForm.password" placeholder="请输入登录密码" show-password></el-input>
         </el-form-item>
     </el-form>
     </div>
@@ -22,9 +22,7 @@
 </template>
 
 <script>
-// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-// 例如：import 《组件名称》 from '《组件路径》';
-
+import { userLogin } from '@/apis/login'
 export default {
 // import引入的组件需要注入到对象中才能使用
   components: {},
@@ -33,13 +31,13 @@ export default {
     return {
       ruleForm: {
         userName: '',
-        passWorg: ''
+        password: ''
       },
       rules: {
         userName: [
           { required: true, message: '不能为空', trigger: 'blur' }
         ],
-        passWorg: [
+        password: [
           { required: true, message: '不能为空', trigger: 'blur' }
         ]
 
@@ -56,8 +54,12 @@ export default {
     async login () {
       try {
         await this.$refs.ruleForm.validate()
-        this.$router.push('/layout/tab1')
-        this.$message.success('登录成功')
+        const res = await userLogin(this.ruleForm)
+        if (res.code === 0) {
+          localStorage.setItem('SWKK_token', res.data.token)
+          this.$router.push('/layout/tab1')
+          this.$message.success('登录成功')
+        } else this.$message.warning(res.msg)
       } catch (error) {
         console.log(error)
       }