vue+vuex+axios实现登录、注册页权限拦截

vue+vuex+axios实现登录、注册页权限拦截

在github上有很多写好的模板，这个项目也是基于模板做的。

现在记录一下我做的过程

1、修改config文件夹里的dev.env.js里的BASE_API，把地址改成请求后端的公共部分

BASE_API: '"http://192.168.xx.xx"',

2、接下来就是操作src文件，先在 views里写好vew组件（login.vue,regist.vue），写好到router里的index.js里配置好路径

login.vue

label-width="0px"

class="card-box login-form">

登录

label-width="0px"

class="card-box login-form">

placeholder="用户名"/>

autoComplete="on"

placeholder="密码">

登录

placeholder="用户名"/>

autoComplete="on"

placeholder="密码">

autoComplete="on"

placeholder="密码">

登录

router/index.js

{ path: '/login', component: _import('Login/login'), hidden: true }

3、在api里的login.js里写好与后端对接的接口地址，在stores里的modules里的user.js里定义user，有state，mutations，action，具体的请求操作写在action里，login.vue或regist.vue调用user.js里写好的请求，getter.js里定义store的getters

api/login.js

import request from '@/utils/request'

export function login(name,password) {

return request({

url: '/XX/XX',

method: 'post',

data: {

name,

password

}

})

}

stores/modules/user.js

import { login,regist,logout } from '@/api/login'

import { getToken,setToken } from '@/utils/auth'

const user = {

state: {

name:'',

token:''

},

mutations: {

SET_NAME: (state, name) => {

state.name = name;

},

SET_TOKEN: (state, token) => {

state.token = token;

setToken(token);

}

},

actions: {

// 登录

Login({ commit }, userInfo) {

const name = userInfo.name.trim();

const password = userInfo.password.trim();

return new Promise((resolve, reject) => {

login(name, password).then(response => {

const data = response.data;

commit('SET_NAME', data.name);

commit('SET_TOKEN', data.token);

setName(data.name);

setToken(data.token);

resolve(response); }).catch(error => { reject(error) }) }) },

// 注册

Regist({ commit }, userInfo) {

const name= userInfo.name.trim();

const password = userInfo.password.trim();

return new Promise((resolve, reject) => {

regist(name, password).then(response => {

const data = response.data;

commit('SET_NAME', data.name);

commit('SET_TOKEN', data.token);

setName(data.name);setToken(data.token);

resolve(response);

}).catch(error => {

reject(error) }) }) },

// 登出

LogOut({ commit, state }) {

return new Promise((resolve, reject) => {

logout().then(response => {

commit('SET_NAME', '');

commit('SET_TOKEN', '');

setName('');

setToken(false);

//removeName();

//removeToken();

resolve(response);

}).catch(error => {

reject(error)

})

})

},

// 前端 登出

FedLogOut({ commit }) {

return new Promise(resolve => {

setToken(false);

commit('SET_TOKEN', false);

resolve()

})

}

}

}

export default user

getter.js:

const getters={

name:state=>state.user.name,

token:state=>state.user.token

}

export default getter

4、在utils里的auth.js里对cookies进行操作，写入，读取，删除用户权限，是否登录的标志等

import Cookies from 'js-cookies'

export function setName(name) {

return Cookies.set("name", name);

}

export function getName() {

return Cookies.get("name");

}

export function setToken(token) {

return Cookies.set("token", token);

}

export function getToken() {

return Cookies.get("token");

}

5、在permission.js里写白名单，对白名单以外的跳转进行拦截然后跳转登录，同时判断用户权限，是否登录,等

import router from './router'

import store from './store'

import NProgress from 'nprogress' // Progress 进度条

import 'nprogress/nprogress.css'// Progress 进度条样式

import {Message} from 'element-ui'

import {getName, getToken} from "@/utils/auth"; // 验权

const whiteList = ['/login', '/regist']; // 不重定向白名单

router.beforeEach((to, from, next) => {

NProgress.start();

if (whiteList.indexOf(to.path) !== -1) {

next();

} else {

if (getToken()==="true") {

next();

NProgress.done()

} else {

next({path: '/login'});

NProgress.done()

}

}

})

router.afterEach(() => {

NProgress.done() // 结束Progress

})

6、utils里的request.js里写拦截码，对后端返回的特定码进行拦截然后做相应的操作

import axios from 'axios'

import { Message, MessageBox } from 'element-ui'

import store from '../store'

// 创建axios实例

const service = axios.create({

baseURL: process.env.BASE_API, // api的base_url

timeout: 15000 // 请求超时时间

});

// respone拦截器

service.interceptors.response.use(

response => {

/**

* code为非200是抛错 可结合自己业务进行修改

*/

const http://res = response.data;

//const res = response;

if (res.code !== '200' && res.code !== 200) {

if (res.code === '4001' || res.code === 4001) {

MessageBox.confirm('用户名或密码错误，请重新登录', '重新登录', {

confirmButtonText: '重新登录',

cancelButtonText: '取消',

type: 'warning'

}).then(() => {

store.dispatch('FedLogOut').then(() => {

location.reload()// 为了重新实例化vue-router对象 避免bug

})

})

}

if (res.code === '4009' || res.code === 4009) {

MessageBox.confirm('该用户名已存在，请重新注册！', '重新注册', {

confirmButtonText: '重新注册',

cancelButtonText: '取消',

type: 'warning'

}).then(() => {

store.dispatch('FedLogOut').then(() => {

location.reload()// 为了重新实例化vue-router对象 避免bug

})

})

}

return Promise.reject('error')

} else {

return response.data

}

},

error => {

Message({

message: error.message,

type: 'error',

duration: 5 * 1000

});

return Promise.rejecthttp://(error)

}

)

export default service

以上就是登录注册的核心部分，写的不对的地方请指教

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。