思路详解:

你是否只会做简单的登录?里面的细节你真的想明白了么?

下面我问你几个问题,你是否能回答上来

你没有token的时候你能随便访问其他页面吗?

       设置登录拦截

怎么拦截?

        通过前置守卫判断有没有token进行判断

那怎么访问登录页呢?

        设置白名单

前置守卫怎么写?

如果有token

        去登录页(to.path) 直接跳转到主页

        去其他页面 直接放行 next()

没有token

        去白名单的页面 直接放行next()

        去其他页面 跳转到登录页next('/login')

在哪里写?

        router   (也可以从router中分离出来)

那么问题又来了,那么token是从哪来的呢?

什么时候有token ?

        登录成功的时候

token在哪 ?

        请求成功是在返回的promise里面

如何储存 ?

        在vuex里储存(store)

储存流程附上: 

//首先定义一个token
state(){ 

    return { 
        token:'' 
    }
}

//通过mutations修改state中的token
mutations:{ 

    setToken(state,newToken){ 

        state.token = newToken 
    } 
}

//通过actions调用mutation中的方法
​actions:{ 
    async login( context,data ){ 

​		//发送Ajax  此处reqLogin为封装的Ajax请求函数

​		const res = await reqLogin( data )

​		context.commit( 'setToken', res.data.data )

​	 } 
}

此时细心的你可以发现没有请求头,那么请求头去哪了呢?

 当你发送一次Ajax的时候就要写一次请求头(具体看要求),每次都要写有没有什么办法一劳永逸呢?

        设置请求拦截器

怎么设置呢 ?(官网有标准格式)

axios.interceptors.request.use((config) => {
        //将token值赋值到这里
  		const token = store.getters.token
        //此处的Bearer 看实际要求(可不写)
  		config.headers.Authorization = 'Bearer ' + token

  		return config

​	}, (error) => {

  		return Promise.reject(error)

​	})

你怎么知道你请求的数据是否成功?有无错误处理?

        设置响应拦截器

怎么设置

 service.interceptors.response.use(( response ) => {
        //先褪掉最外层的壳
  		const res = response.data

 		 const { message, success } = res

 	 if (!success) {

   		 Message.error( message )

​    		return Promise.reject(new Error( message ))

​	  } else {

​    		Message.success( message )
  	  }
 		 return res

​	}, (error) => {

 		 return Promise.reject(error)
​	})