登录页面实现

src/components/navbar/navbar.vue

@@ -25,21 +25,21 @@
     <!-- 导航第二排 -->
     <div class="navbar-bottom navnav">
       <div>
-        <a href="">
+        <router-link to="">
           <img src="../../assets/image/navbar/工作流程.png" alt="" />
-          <span>工作流程</span></a
+          <span>工作流程</span></router-link
         >
       </div>
       <div>
-        <a href="">
+        <router-link to="">
           <img src="../../assets/image/navbar/每日专报.png" alt="" />
-          <span>每日专报</span></a
+          <span>每日专报</span></router-link
         >
       </div>
       <div>
-        <a href="">
+        <router-link to="">
           <img src="../../assets/image/navbar/通报通告.png" alt="" />
-          <span>通报通告</span></a
+          <span>通报通告</span></router-link
         >
       </div>
     </div>

src/network/classify.js

@@ -4,7 +4,9 @@ import {
 
 
 
-// 全部分类
-export const getclassify = (searchKey, needStatic) => {
-    return get(`/api/file/FileTypeList?searchKey=${searchKey}&needStatic=${needStatic}`);
+
+
+// 全部分类 一级分类
+export const getclassify = (searchKey, needStatic,level) => {
+    return get(`/api/file/FileTypeList?searchKey=${searchKey}&needStatic=${needStatic}&level=${level}`);
 }

src/router/index.js

@@ -1,30 +1,37 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import HomeView from '../views/HomeView.vue'
-
+import store from '../store/index'
 Vue.use(VueRouter)
 
 // 路由懒加载
-const Login =()=>import('../views/login/login.vue')
-const PoiceMessage = ()=> import('../views/Poice/PoiceMessage.vue')
+const Login = () => import('../views/login/login.vue')
+const PoiceMessage = () => import('../views/Poice/PoiceMessage.vue')
 const articles = () => import('../views/article/articles.vue')
 
 
 
-const routes = [
-  {
+const routes = [{
     path: '/articles/:fileID',
     name: 'articles',
     component: articles,
-    meta:{
-      title:'政策文件详情页面',
-      keepAlive:false
+    meta: {
+      title: '政策文件详情页面',
+      keepAlive: false,
+      // 需要验证登录才能访问
+      auth: true,
     }
   },
   {
     path: '/PoiceMessage',
     name: 'PoiceMessage',
-    component: PoiceMessage
+    component: PoiceMessage,
+    meta: {
+      title: '政策文件详情页面',
+      keepAlive: false,
+      // 需要验证登录才能访问
+      auth: true,
+    }
   },
   {
     path: '/login',
@@ -34,22 +41,51 @@ const routes = [
   {
     path: '/',
     name: 'index',
-    component: HomeView
+    component: HomeView,
+    meta: {
+      title: '政策文件详情页面',
+      keepAlive: false,
+      // 需要验证登录才能访问
+      auth: true,
+    }
   },
   // {
   //   path: '/about',
   //   name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
+  // route level code-splitting
+  // this generates a separate chunk (about.[hash].js) for this route
+  // which is lazy-loaded when the route is visited.
   //   component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
   // }
 ]
 
 const router = new VueRouter({
   // mode: 'history',
+  
   base: process.env.BASE_URL,
-  routes
+  routes,
+  
+})
+// 登录验证
+router.beforeEach((to, from, next) => {
+  if (to.matched.some(m => m.meta.auth)) {
+    // 对路由进行验证
+    if (store.state.islogin == '100') { // 已经登陆
+      next() // 正常跳转到你设置好的页面
+    } else {
+      // 未登录则跳转到登陆界面，query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来；
+      next({
+        path: '/login',
+        query: {
+          Rurl: to.fullPath
+        }
+      })
+    }
+  } else {
+    next()
+  }
 })
 
 export default router
+
+

src/store/index.js

@@ -5,10 +5,14 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    islogin:0,
   },
   getters: {
   },
   mutations: {
+    changelogin(state,data){
+      state.islogin=data
+    }
   },
   actions: {
   },

src/views/Poice/PoiceMessage.vue

@@ -63,9 +63,9 @@ export default {
         // console.log("file+" + this.poicefilelist);
       });
     },
-    // 获取所有分类信息
+    // 获取所有分类信息 一级分类
     getclassify(){
-      getclassify('','true').then((res)=>{
+      getclassify('','true',1).then((res)=>{
         console.log(res);
         this.classifylist.push(...res.data)
       })

src/views/Poice/children/work.vue

@@ -60,6 +60,9 @@ export default {
       },
     },
   },
+  computed:{
+
+  }
 };
 </script>
 

src/views/login/login.vue

@@ -37,7 +37,7 @@
 
 <script>
 import { getUserApi, getLogin } from "../../network/login";
-import { Toast } from "vant";
+import { Toast, Notify } from "vant";
 
 export default {
   name: "Login",
@@ -49,16 +49,27 @@ export default {
   },
   methods: {
     onSubmit(values) {
-      console.log("submit", values);
+      // 打印提交的登录
+      // console.log("submit", values);
     },
     getLogin() {
-      // setInterval(function () {
-      //   alert("Hello");
-      // }, 3000);
-
       getLogin(this.username, this.password).then((res) => {
         if (res.ret && res.data) {
+          // 改变vue-x中登录状态
+          // 100 状态码为登录成功
+          this.$store.commit("changelogin", "100");
+          // 提示登录成功
+          Notify({ type: "success", message: "登录成功" });
+          // 登录成功默认跳转首页
           this.$router.push("/");
+
+          // if (this.$route.path.indexOf("articles") !== 1) {
+          //   this.$router.push("/articles/" + this.CardItemList.fileID);
+          //   console.log("跳转");
+          //   console.log(this.CardItemList.fileID);
+          // } else {
+          //   return false;
+          // }
         } else {
           Toast(res.msg);
         }