vue实现登录功能

思路–使用基于token的登录流程

使用基于Token 的身份验证方法，大概的流程是这样的：

\1. 客户端使用用户名跟密码请求登录

\2. 服务端收到请求，去验证用户名与密码

\3. 验证成功后，服务端会签发一个Token，再把这个 Token 发送给客户端

\4. 客户端收到Token 以后可以把它存储起来，比如放在 Cookie 里或者 localStorage 里

\5. 客户端每次向服务端请求资源的时候需要带着服务端签发的Token

\6. 服务端收到请求，然后去验证客户端请求里面带着的Token，如果验证成功，就向客户端返回请求的数据

//在点击登录按钮验证表单的方法里:
    // 表单验证的代码方法
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
  // ------第一步:客户端使用用户名跟密码请求登录------
          loginApi(this.loginData).then((result) => {
            console.log(result);
            if (result.data.status == 200) {
  //------第二步:客户端收到Token 以后可以把它存储起来在cookie里------
              // 设置cookie
              setCookie("token", result.data.token);
              // 跳转到layout/userlist
              this.$router.push("/layout/userlist");
            } else {
              alert(result.data.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

//第三步:------客户端每次向服务端请求资源的时候需要带着服务端签发的Token------
在utils--request.js中使用axios的拦截机
import axios from "axios";
import { getCookie } from "@/utils/auth.js"
let service = axios.create({
    baseURL: "http://localhost:3000/api",
    timeout: 5000
})

// 拦截请求
service.interceptors.request.use(config => {
    let token = getCookie(token); //获取token

    //将token放入到请求头中
    if (token) {
        config.headers.token = token;
    }
    return config;

})

// 拦截响应
// service.interceptors.response
export default service;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

js-cookie模块实现存储token

cnpm install js-cookie --save

src–utils–auth.js

import Cookies from "js-cookie";

// 创建cookie
export let setCookie = (key, value) => {
    Cookies.set(key, value, { expires: 1 });
}
// 获取cookie
export let getCookie = (key) => {
    return Cookies.get(key);
}
// 删除cookie
1
2
3
4
5
6
7
8
9
10
11

判断是否是用户已经登录了

使用vue-router的路由守卫
//全局前置路由守卫

import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入模块化的路由
import { userRouter } from "@/router/modules/users.js"
import { productRouter } from "@/router/modules/product.js"
// 引入获取token的getCookie的方法
import { getCookie } from "@/utils/auth.js"


Vue.use(VueRouter);

const routes = [{
        path: '/',
        redirect: "/login"
    },
    {
        path: '/login',
        name: 'login', //命名路由
        component: () => import("@/views/UserLogin/UserLogin.vue")
    },
    {
        path: '/register',
        name: 'register',
        component: () => import("@/views/UserRegister/UserRegister.vue")
    },
    // 配置ElementUI路由
    {
        path: "/element",
        component: () => import("@/views/ElementUI/ElementUI.vue")
    },
    // 配置嵌套路由
    userRouter,
    productRouter

]

const router = new VueRouter({
    routes
})

// 路由守卫--全局前置守卫(先拦截所有路由,满足一定条件执行next方法,next方法是向下执行)
router.beforeEach((to, from, next) => {
    // to:即将到达的路由    from:即将离开的路由 next:向下执行的方法
    // console.log(to);
    // console.log(from);
    if (to.path == "/login") {
        // 如果是登录页面,放行
        next();
    } else {
        // 如果不是登录页面,验证token。如果有token,则执行next(),否则跳转到登录页面
        let token = getCookie("token");
        // console.log(token);
        if (token) {
            next();
        }
        if (!token) {
            next("/login");
        }
    }

})


// 路由守卫--全局后置钩子(进入路由之后的操作)
// router.afterEach(() => {
//     // console.log("666");
// })


export default router
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70