项目整理11.26——登录相关

1. vue引入axios

import axios from 'axios'
Vue.prototype.axios = axios
//配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/'

2.vue登录验证实现

login(){
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.axios.post("/login",this.loginForm)
                    .then((result) => {
                        const {data} = result;
                        window.console.log(data)
                        if(result.status == 200){
                            //登录成功
                        }else{
                            //登录失败
                        }
                    })
                } 
            });
        },

3.莫名奇妙 console.log()一直报错

window.console.log()竟然好使了。

4.这是axios返回的结果

我们真正需要的，只有data字段。可用解构赋值提取。

const {data:res} = result;
//将data字段提取出，命名为res

4.关于token

• 登录成功后的token 保存到sessionStorage里。

wiodow.sessionStorage.setItem("token~~~~",  "value");

• 项目里除了登录接口，其他的接口只能在登录后才能访问
• token只能在当前网站打开时生效，所以保存到sessionStorage里（localstorage保存的时间太久，不适合这个场景~~~~）

5.路由导航守卫

问题描述：存储的token丢失时，用户不能访问网站内页，强制跳转到首页。

//路由导航守卫
//to：即将进入的路由对象  from：正要离开的路由对象  next：一个方法，代表放行
router.beforeEach((to, from, next) => {
    //即将去login页，放行
    if (to.path === '/login') {
        next() //放行（参数是路由）~~
    }
    const tokenStr = window.sessionStorage.getItem('token');~~
    //该页没有token值，就放行到login页；有token，放行
    if (!tokenStr) {
        next('/login')
    } else {
        next()
    }
})

6.退出 功能

原理：1、清空token 2、跳转登录页

exit(){
    window.sessionStorage.clear();
    this.$router.push('/login');
}