创新实训博客（5）——Vue请求、参数传递、页面路由、权限控制等

axios和qs

请求的部分是使用axios，qs可以用于格式化要传递的数据。

在这次的项目中，我是计划封装一个request模块。

首先设置请求地址（已经配置过代理解决跨域问题，因此使用短地址）。

[code]// 设置请求的地址
const service = axios.create({
baseURL: '/api',
timeout: 5000
})

构造请求头，这里除了登录和注册以外所有操作必须带有token。

[code]service.interceptors.request.use(
config => {
// 传递token，除了登录的时候没有token以外都要传
if (store.getters.token) {
config.headers['Authorization'] = getToken()
}
return config
},

然后处理后端返回的结果，data是后期需要返回的数据，先放着。

首先读取返回状态，200代表成功，其他情况均是出现错误。

然后就是对应的情况对应具体的操作去执行。

[code]service.interceptors.response.use(

response => {
// 后期需要返回的数据，先放着
const res = response.data
// 我的要求：200代表成功
if (res.code !== 200) {
// 设置错误信息
var out_msg = (res.code + ' - ' + res.msg) || (res.code + ' - ' + '错误！')
Message({
message: out_msg,
type: 'error',
duration: 5 * 1000
})

router文件

这个文件的作用就是根据路径路由到对应的vue页面

[code]{
path: '/',
component: Layout,
redirect: '/home',
children: [{
path: 'home',
name: 'Home',
component: () => import('@/views/dashboard/index'),
meta: { title: '首页', icon: 'home' }
}]
},

这里的含义是：/可以重定向到/home，然后这个页面显示的是dashboard中的内容

然后还可以添加权限让不同的用户显示出不同的菜单栏

permission文件

这个文件的作用主要是控制页面的路由，就是当你输入一个地址的时候，判断能否成功跳转到那个页面。

首先是一个白名单列表，这个列表里的页面可以直接访问到。

然后对于普通页面来说，有这样几个步骤：

1. 检查token：如果有token，进入权限判定。

2. 如果没有token，首先应该从cookies中读取token或者跳转到登录页面。

3. 如果没有权限数据信息，那么根据token向后端请求用户信息，返回相对应的信息解析出用户权限。

4. 根据用户权限判定能否访问目标页面。

[code] const hasToken = getToken()
if (hasToken) {
if (to.path === '/login') {
// 登录页面进行跳转，不能重复登录
...
} else {
// 判断用户信息
const hasGetUserInfo = store.getters.role
if (hasGetUserInfo >= 0) {
next()
} else {
try {
// 获取信息
await store.dispatch('user/getInfo')
next()
} catch (error) {
...
}
}
}
} else {
// 没有token 跳转登录或者白名单
...
}

module/user文件

这个文件存放的是用户的相关信息获取与设定，以login函数为例子来看：

[code]    return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(response => {
const { data } = response
commit('SET_TOKEN', data.token)
commit('SET_NAME', data.user.name)
commit('SET_EMAIL', data.user.email)
commit('SET_ROLE', data.user.roleid)
setToken(data.token)
resolve()
}).catch(error => {
reject(error)
})
})

首先是获取传递的username和passwd参数

然后调用api接口向后端发请求，并处理好返回数据

然后根据接收到的数据，调用commit函数设置好用户信息

最后不要忘记设置token

组件参数传递

组件之间使用prop进行参数传递。

比如说我们构造一个<test-item>对象，在props里定义好一个要传入的参数。

[code]props: {
title: {
type: String,
default: ''
}
}

然后在html里这样写就可以完成参数传递

[code]<test-item title="test" />

页面间参数传递

我使用的类似于get请求的方式，使用query

在发送要传递数据的页面里函数中使用router.push，路径中添加上对应的参数。

[code]openBlog() {
this.$router.push({ path: '/blog/detail/?id=' + this.id })
}

然后在接收传递数据的页面，使用route.query获取参数。

[code]id: this.$route.query.id