拦截器和路由守卫

src/apis/home.js

@@ -1,10 +1,15 @@
-// import axios from '../utils/request'
+import axios from '../utils/request'
 // 用户登录接口
-// export const userLogin = (data) => {
-//   return axios({
-//     method: 'post',
-//     url: '后续地址',
-//     data
-//   })
-// }
-// console.log(axios, '666666666666')
+export const userLogin = (data) => {
+  return axios({
+    method: 'post',
+    url: '/admin/login',
+    data
+  })
+}
+// 退出登录接口
+export const loginOut = () => {
+  return axios({
+    url: '/admin/logout'
+  })
+}

src/router/index.js

@@ -198,3 +198,14 @@ const router = new VueRouter({
 })
 
 export default router
+
+router.beforeEach((to, from, next) => {
+  // 如果是去登录页，不需要验证，直接下一步
+  if (to.name === 'login') next()
+  // 否则要有token值才能下一步，不然就返回登录页
+  else {
+    const token = localStorage.getItem('daliCK_token')
+    if (token) next()
+    else next({ name: 'login' })
+  }
+})

src/utils/request.js

@@ -1,35 +1,35 @@
 import axios from 'axios'
 // export const baseURL = '666初始地址'
 export default axios.create({
-  baseURL: '666初始地址',
+  baseURL: 'http://192.168.0.135:8004',
   timeout: 5000
 })
 
-// // 请求拦截器
-// axios.interceptors.request.use(function (config) {
-//   // 在发送请求之前做些什么：看看有没有token，如果有通过请求头的方式传递token
-//   const token = localStorage.getItem('token')
-//   if (token) { // 判断是否有token,有，则
-//     // config.headers['Authorization'] = token
-//     config.headers.Authorization = `Bearer ${token}`
-//   }
+// 请求拦截器
+axios.interceptors.request.use(function (config) {
+  // 在发送请求之前做些什么：看看有没有token，如果有通过请求头的方式传递token
+  const token = localStorage.getItem('daliCK_token')
+  if (token) { // 判断是否有token,有，则
+    // config.headers['Authorization'] = token
+    config.headers.Authorization = `Bearer ${token}`
+  }
 
-//   return config
-// }, function (error) {
-//   // 对请求错误做些什么
-//   return Promise.reject(error)
-// })
+  return config
+}, function (error) {
+  // 对请求错误做些什么
+  return Promise.reject(error)
+})
 
-// // 添加响应拦截器
-// axios.interceptors.response.use(function (response) {
-//   // 对响应数据做点什么--response就是发送每个请求的返回值
-//   if (response.data.message === '用户信息验证失败') {
-//     // Toast.fail('未登录，请先登录')
-//     // 登录完之后能返回刚刚的页面
-//     location.href = '#/login?redirectUrl=' + location.href
-//   }
-//   return response
-// }, function (error) {
-//   // 对响应错误做点什么
-//   return Promise.reject(error)
-// })
+// 添加响应拦截器
+axios.interceptors.response.use(function (response) {
+  // 对响应数据做点什么--response就是发送每个请求的返回值
+  // if (response.data.message === '用户信息验证失败') {
+  //   // Toast.fail('未登录，请先登录')
+  //   // 登录完之后能返回刚刚的页面
+  //   location.href = '#/login?redirectUrl=' + location.href
+  // }
+  return response
+}, function (error) {
+  // 对响应错误做点什么
+  return Promise.reject(error)
+})

src/views/home/index.vue

@@ -7,8 +7,8 @@
           <img src="@/assets/img/user.png" alt="" />
         </div>
         <div class="txt">
-          <h3>Admin</h3>
-          <p><i class="el-icon-user-solid"></i>系统管理员</p>
+          <h3>{{userData.nickName}}</h3>
+          <p><i class="el-icon-user-solid"></i>{{userData.realName}}</p>
         </div>
       </div>
       <div class="fast">
@@ -103,6 +103,8 @@ export default {
   components: {},
   data () {
     return {
+      // 用户信息
+      userData: {},
       info1: [
         { name: '藏品征集', imgUrl: '01', push: 'collect' },
         { name: '藏品登记', imgUrl: '1', push: '/layout/holding0' },
@@ -151,6 +153,9 @@ export default {
   created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted () {
+    // 进来显示用户信息
+    const userData = localStorage.getItem('daliCK')
+    this.userData = JSON.parse(userData).user
   },
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前

src/views/layout/index.vue

@@ -35,7 +35,8 @@
         <div class="img">
           <img src="@/assets/img/user.png" alt="" />
         </div>
-        <span>Admin</span>
+        <span>{{userData.nickName}}</span>
+        <span class="loginOut" @click="loginOut">退出登录</span>
       </div>
     </div>
     <Router-view />
@@ -43,9 +44,7 @@
 </template>
 
 <script>
-// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-// 例如：import 《组件名称》 from '《组件路径》';
-
+import { loginOut } from '@/apis/home'
 export default {
   name: 'Layout',
 
@@ -54,6 +53,8 @@ export default {
   data () {
     // 这里存放数据
     return {
+      // 用户信息
+      userData: {},
       // 控制子菜单显示
       isShow: 0,
       tabList: [
@@ -97,6 +98,29 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    // 退出登录
+    loginOut () {
+      this.$confirm('确定退出码?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(async () => {
+        // 发请求，清空数据
+        await loginOut()
+        localStorage.removeItem('daliCK')
+        localStorage.removeItem('daliCK_token')
+        this.$router.push('/login')
+        this.$message({
+          type: 'success',
+          message: '退出成功!'
+        })
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消.'
+        })
+      })
+    },
     skip (item, ind) {
       this.$router.push(item.push + ind).catch(() => {})
       this.isShow = 0
@@ -108,7 +132,11 @@ export default {
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {},
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {},
+  mounted () {
+    // 进来显示用户信息
+    const userData = localStorage.getItem('daliCK')
+    this.userData = JSON.parse(userData).user
+  },
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
   beforeUpdate () {}, // 生命周期 - 更新之前
@@ -173,6 +201,9 @@ export default {
     }
   }
   .right {
+    .loginOut{
+      cursor: pointer;
+    }
     display: flex;
     align-items: center;
     margin-right: 50px;

src/views/login/index.vue

@@ -32,6 +32,7 @@
 </template>
 
 <script>
+import { userLogin } from '@/apis/home'
 export default {
   name: 'Login',
   components: {},
@@ -44,19 +45,31 @@ export default {
       rules: {
         userName: [
           { required: true, message: '请输入账号', trigger: 'blur' },
-          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
         ],
         passWord: [
           { required: true, message: '请输入密码', trigger: 'blur' },
-          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
         ]
       }
     }
   },
   methods: {
     // 点击登录
-    login () {
-      this.$router.push('/layout/home')
+    async login () {
+      try {
+        await this.$refs.ruleForm.validate()
+        const res = await userLogin(this.ruleForm)
+        // console.log(res)
+        if (res.data.code === 0) {
+          localStorage.setItem('daliCK', JSON.stringify(res.data.data))
+          localStorage.setItem('daliCK_token', res.data.data.token)
+          this.$router.push('/layout/home')
+          this.$message.success('登录成功')
+        } else this.$message.error(res.data.msg)
+      } catch (error) {
+        console.log(error)
+      }
     }
   }
 }