《前端登录流程》

发表于 分类于 ， Valine：

这是前面试经常被问到问题。首先我们要早在脑中有一个大概的过程。

总体思路就是在登录页面点击登录，前端会带着用户名和密码去调用后台登录的接口；

后端收到请求，验证用户名和密码，验证失败返回错误信息；前端会展示相应的错误信息，验证成功，就会给前端返回对应信息，包括 token；

前端拿到 token 后，将 token 存入 vuex 和 localStorage 中，并跳转页面，即登陆成功；

前端每次跳转至对应的具备登陆状态的的页面时，都是要检测是否有 token 的，不存在的话需要用路由守卫拦截到登录页；

比如说：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import router from "./index";
import store from "../store/index";

router.beforeEach((to, from, next) => {
  if (!store.state.UserToken) {
    // 未登录  页面是否需要登录
    if (
      to.matched.length > 0 &&
      !to.matched.some((record) => record.meta.requiresAuth)
    ) {
      next();
    } else {
      next({
        path: "/login",
      });
    }
  } else {
    // ...
    next();
  }
});

另外，在向后端发送请求时，需要在请求头中带上 token，一般封装在请求拦截器中，后端判断请求头中有无 token，有则验证这个 token，验证成功返回正常的数据，验证失败的话，不如说 token 过期了就返回对应的错误码，前端拿到错误信息，清除 token，并返回登录页；
比如说：

1
2
3
4
5
6
7
8
9
10
11
// 请求拦截器，每次请求都会先执行这里的代码
axios.interceptors.request.use(
  (config) => {
    // 请求头携带sessionStorage里面的token
    config.headers.Authorization = window.sessionStorage.getItem("userToken");
    return config;
  },
  function (err) {
    // 对请求错误做些什么
  }
);