vue项目：拦截所有路由-验证登录

14_Vue项目/day-2/vue2-shop/src/router/index.js

@@ -1,23 +1,28 @@
-import Vue from "vue";
-import VueRouter from "vue-router";
-import HomeView from "../views/HomeView.vue";
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import HomeView from '../views/HomeView.vue';
 
 Vue.use(VueRouter);
 
 const routes = [
   {
-    path: "/",
-    name: "home",
+    path: '/',
+    name: 'home',
     component: HomeView,
   },
   {
-    path: "/about",
-    name: "about",
+    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.
     component: () =>
-      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
+      import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import('../views/Login.vue'),
   },
 ];
 
@@ -25,4 +30,29 @@ const router = new VueRouter({
   routes,
 });
 
+// 由于后台管理系统 需要用户登录后才可以访问页面
+//  因此这里要拦截所有的路由，校验用户是否登录
+
+router.beforeEach((to, from, next) => {
+  // 无论什么情况下 都要确保next被调用一次
+  const token = localStorage.getItem('token');
+
+  if (token) {
+    // 说明登录过
+    if (to.name === 'login') {
+      // 如果登录过并且还是去登录页面， 此时就中断当前导航，并重新导航到主页
+      return next('/');
+    }
+
+    next(); // 放行
+  } else {
+    // 就没有登录过
+    if (to.name === 'login') return next();
+
+    // 如果没有登录，同时 你去的页面还不是登录页面
+    // 此时 强制你 去登录页面
+    next({ name: 'login' });
+  }
+});
+
 export default router;

14_Vue项目/day-2/vue2-shop/src/views/Login.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h3>登录</h3>
+  </div>
+</template>

14_Vue项目/day-2/登录流程.txt

@@ -0,0 +1,12 @@
+认证  -> 鉴权  -> 授权
+
+认证：通过账号和密码认证。在登录系统时 通过ajax将用户账号和密码 发送给 服务器端。服务端收到账号和密码 以其为条件从数据库中查询是否有该用户的记录信息。如果有，表示认证成功。否则认证失败。认证失败时 会给 前端一个提示“用户名或密码错误”，并且需要用户重新认证 直到 成功为止。
+
+鉴权：服务端 后 根据当前认证成功的用户信息 生成一个签名--token。同时将token信息响应给前端，前端需要将token信息 缓存起来。在接下来的每一次http请求中都要携带者该token，服务器端会验证token的有效性，如果有效就会响应数据，否则告诉用户token过期或者还没有登录，需要用户重新登录才可以。
+
+授权：基于角色role来设计。角色role具有访问那些页面的权限。用户可以拥有角色来获取对应权限。而 用户 和 角色 可以 是 一对一 或者 一对多 或者 多对多的关系。咱们的后台在设计时采用的 一对一的 关系。
+
+Web存储方案
+cookie
+localStorage 
+sessionStorage